10 Animation

This chapter covers

  • Easing functions used by animations
  • The svelte/animate package
  • The svelte/motion package
  • The svelte/transition package
  • Creating custom transitions
  • Transition events

Adding animation to a web application can make it more enticing to users and can make some operations more intuitive. There are libraries for many web frameworks that add animation support, but in Svelte this is a built-in feature.

Svelte provides many transition directive values and functions that make it easy to add CSS-based animation to elements. The fact that they are CSS-based rather than JavaScript-based means they do not block the main thread, which is good for performance. This chapter describes each of the provided animations and concludes ...

Get Svelte and Sapper in Action now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial