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 with showing how custom transitions can be implemented.

Svelte supports two kinds of animations: adding/removing an element, and changing a value.

When elements are added to or removed from the DOM, animation allows a special effect to occur over a given number of milliseconds. For example, added elements can fade in, and removed elements can slide out of the browser window. This is more visually appealing than abruptly adding or removing an element.

10.1 Easing functions

10.2 The svelte/animate package

10.3 The svelte/motion package

10.4 The svelte/transition package

10.5 The fade transition and flip animation

10.6 The crossfade transition

10.7 The draw transition

10.8 Custom transitions

10.9 The transition vs. in and out props

10.10 Transition events

10.11 Building the Travel Packing app

Summary