Svelte Appear Transition

Apply styling to elements when they appear in the viewport

#supported

Need a Svelte website built?

Hire a professional Svelte developer today.

Download

Svelte Appear Transition

An easy to use and SSR friendly Svelte action that transitions elements when they appear in the viewport.

Installation

npm i -D svelte-appear-transition

Examples

Fade in

<div
  use:appear={{
    from: {
      opacity: '0',
      transform: 'translateY(40px)',
      transitionTimingFunction: 'ease-out'
    },
    to: {
      opacity: '1',
      transform: 'translateY(0)'
    },
    duration: 500
  }}
>
  ...
</div>

Same transition, but using Tailwind to apply the default styles:

<div
  class="opacity-0 translate-y-10 duration-500 ease-out"
  use:appear={{
    to: {
      opacity: '1',
      transform: 'translateY(0)'
    }
  }}
>
  ...
</div>

Staggered slide up

{#each items as item, i}
  <div
    use:appear={{
      from: {
        transform: 'translateY(40px)',
        transitionDelay: `${i * 100}ms`,
        transitionTimingFunction: 'ease-out'
      },
      to: {
        transform: 'translateY(0)'
      },
      duration: 500
    }}
  >
    {item}
  </div>
{/each}

Usage

Settings

Name	Optional	Default	Description
`to`	x	-	A string of class names or a styling object to apply when the element is in view.
`from`	✓	-	A string of class names or a styling object to apply by default.
`duration`	✓	`500`	Duration of the transition in milliseconds.
`threshold`	✓	`0.5`	Threshold at which the transition will be triggered. Either a single number or an array of numbers between 0.0 and 1.0.
`bothWays`	✓	`false`	Whether to apply the transition in both directions. Can be `true` only if `from` is defined.

Events

Name	Description	Example
`styletransitionstart`	Fired right before a transition starts.	`on:styletransitionstart={(event) => { event as TransitionEvent }}`
`styletransitionend`	Fired right after a transition ends.	`on:styletransitionend={(event) => { event as TransitionEvent }}`

The detail property of TransitionEvent has the following shape:

{
  /** The element that triggered the transition. */
  element: HTMLElement;
  /** The settings that were passed to the action. */
  transition: TransitionSettings;
  /** The direction of the transition. */
  direction: 'in' | 'out';
}

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing

Need a Svelte website built?

Hire a professional Svelte developer today.