Svelte Summit
Geoff Rich - Svelte Transitions and Accessibility

Geoff Rich - Svelte Transitions and Accessibility

Platinum Sponsor:
GraphCMS -

Gold Sponsors:
LevelUp Tutorials -
Cloudflare Pages -
Svekyll -
Netlify -
Vercel -
Magic -
FaunaDB -
WPEngine -

Music By:
Fractal -

About the talk:
Svelte includes built-in animations that makes it easy to slide, scale, and fly elements in and out of the DOM. However, you need to be careful to not trigger motion sickness in your users. I will go over which Svelte transitions could cause accessibility issues and how to respect user motion preferences when using them.

We'll iteratively build a solution to change which transition we use when the user requests reduced motion -- first only using CSS, then detecting the user's motion preference in a Svelte component, to finally encapsulating the logic in a reusable Svelte store.