chapter ten

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. It 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  svelte/animate

10.3  svelte/motion

10.4  svelte/transition

10.5  fade and flip

10.6  crossfade transition

10.7  draw transition

10.8  Custom transitions

10.9  transition vs. in and out

10.10  Transition events

10.11  Building the Travel Packing app

10.12  Summary