Transitions

Skeleton provides a simple interface for modifying Svelte component transitions. This supports Svelte-provided transitions, such as: fade, blur, fly, slide, and scale. As well as custom CSS and Javascript transitions.


Transitions

Look for this indicator on each component page. If present, custom transitions are supported.

Properties

Provide the transition and transition parameters as follows.

Transition In

html
<ExampleComponent transitionIn={fade} transitionInParams={{ duration: 200 }} />

Transition Out

html
<ExampleComponent transitionOut={fade} transitionOutParams={{ duration: 200 }} />

Parameters

You can modify parameters for both the default in and out transitions.

html
<ExampleComponent transitionInParams={{ duration: 400 }} />

Disable Transitions

To disable all transitions for a single component, set transitions to false. This will affect both the in and out transitions.

html
<ExampleComponent transitions={false}/>

Non-Supported Transitions

Note that Svelte provides special crossfade and draw transitions. However these work and operate in a different manner than standard transition such as fade and fly. These are not supported within the dynamic transition system at this time.

Reduced Motion

To ensure a better experience for users who are sensitive to motion or have vestibular disorders, Skeleton's default behavior is to disable all transitions when users enable prefers-reduced-motion in their browser settings.

Force Enable

For components with subtle transitions, you may choose to override this behavior by applying a property of transition={true} to the component. We encourage you to use this setting with caution though.

Store

You may utilize prefersReducedMotionStore to access the user's preferred motion setting.

typescript
import { prefersReducedMotionStore } from '@skeletonlabs/skeleton';

const userMotionPreference = $prefersReducedMotionStore;