Chapter 19 Transitioning in Time: Animation
The interaction examples in Chapter 18 mostly involved simple switches between different states: one moment, the graphic was in one state, and the next moment, it had changed. Although this is technically animation, it skips the most interesting aspects of animated SVG graphics: the ability to show a transition between two states. This transition (also known as tweening or interpolation) can greatly enhance the user’s understanding of a change, making it easier to comprehend a new state or fresh information.
Even without interaction, animation can enhance many graphical elements, focusing the user on one area of the screen, or emphasizing the relationships between different components. Extend those little animated moments and connect multiple animations together, and you can create a complete animated short film in SVG.
We’ve used animation in a few examples so far, but have not really discussed what it means to animate a vector graphic, or how to plan a project that involves animation.
This chapter runs through your options for creating animated SVG. It is neither a detailed look at designing dynamic graphics, nor a comprehensive introduction to any of the animation techniques. Instead, it tries to lay out the options so you can decide which approach is appropriate for the project at hand.
Even more than any other aspect of web design, planning for performance becomes particularly important in animation. If a browser takes too long to update a graphic, the transition between states can stutter and jerk, exhibiting jank, to use the animator’s term. Rather than enhancing your website, a janky animation can make it look broken—distracting and irritating your users instead of captivating them.
To avoid the dreaded jank, you’ll need to plan—and test—your animations carefully. There are often many ways to code a given effect, but browsers can optimize certain operations better than others.
Figures and Examples#
The file names link to the code view on GitHub. Beware: the linked screenshots are hi-resolution; some have very large file sizes.
View all files for this chapter on GitHub.
- Unlabelled code snippet in the description of
- Examples from previous chapters referenced in the “CSS Keyframe Animations” section
- Example 19-1. Enhancing a scripted SVG game with CSS animations and transitions
This is the CSS for Example 18-6, the final version of the game from Chapter 18.
- Example 19-2. Simple animation using
- Figure 19-1. Three stages of an infinite animation of shapes moving around a path
- Example 19-3. Animating motion along a path
- Unlabelled snippet in “Triggering Regular Updates” section
- Figure 19-X1. A simple logo, ready for animation
- Figure 19-X2. Frames of a logo animation, at one-second intervals
- Example 19-X1. Creating a complex animation sequence from synchronized animation elements
- Figure 19-X3. Timing of triangular motion with linear versus paced
- Figure 19-X4. Two X-ray views into Kurt’s skull (oh my!)
- Example 19-X2. Creating complex transformation patterns with additive animations
- Example 19-X3. Using accumulative repeats and spline easing to create a pulsed animation
- Figure 19-X. Frames from an animated mask effect
- Example 19-X4. An animated mask effect, by animating gradient stops within the mask
- Example 19-X5. An animated mask effect, by animating the position of a gradient-filled rectangle within the mask
- Figure 19-X6. The layers used to create an animated mask effect
- Example 19-X6. An animated mask effect, by animating the opacity of multiple layers with different masks
- “Using SVG/SMIL Animation Elements”: SVG/SMIL elements can add complex animation effects with a few lines of code. Too bad about the browser support.
- “Planning for Performance”: Designing an effective animation is equal parts art and science. Here, we discuss the technical side of creating smooth web animations.
- Reference: SVG Elements and Attributes