Advanced SVG Animation

Sarah Drasner from Trulia begins her course on Advanced SVG Animation with a brief introduction and an overview of why you should be using SVG. She shares a few use cases and outlines the SVG DOM. - CodePen Collection: http://codepen.io/collection/XvBQJQ/

The simplest way to create SVG graphics is with the platonic shapes. These elements let you define rectangles, circles, polygons, etc. Sarah walks through a couple examples and also talks briefly about the SVG ViewBox.

Paths create SVG shapes by specifying a series of coordinates. These coordinates can be lines or curves depending on the letter preceding them. Sarah shares a few examples of SVG paths and also explains the preserveAspectRatio property as well as SVG groups.

SVG design tools often export code that contains unnecessary comments or decimal places. Optimizing these SVG files can greatly reduce the file size and lead to better animation performance. Sarah also demonstrates how CSS animations are used to animate SVG.

In this exercise, you will create a simple SVG graphic with at least four attributes. Then you will optimize it and animate at least two elements. After the exercise, Sarah shares a few tips for inlining SVG elements.

Step animations consists of moving one large animation sprite to show each “cell” of the animation. Removing the steps creates a rolling background effect. When multiple rolling background exists, Sarah demonstrates how staggering the durations can add a sense of depth to the scene.

Sarah spends a few minutes demonstrating responsive SVG animation sprites. They key to this technique is the use of media queries to hide and how the appropriate animating objects and JavaScript to shift the ViewBox as the container is resized. She then extends these ideas to a responsive animated infographic.

Atmospheric and elemental motion are techniques used to add richness to animation. For example, reducing the contrast or blurring objects that are further away are aspects of elemental motion. Sarah shares a few examples and walks through the code behind these techniques.

While this isn’t specific to SVG, performance can be heavily impacted by unoptimized SVG graphics. Sarah stresses the importance in testing the performance of web animations. She also shares a few of her own benchmarks as they related to different animation styles.

Sarah shares a chart of CSS properties that can be animated and explains how they affect layout, paint, and composite events. She also spends a few minutes answering audience questions about the React animation library.

Sarah introduces some of the features of the Greensock animation library. She then discusses how it can solve some of the issues that arise related to longer animations, browser inconsistencies, and performance.

The Greensock syntax is similar to other libraries like jQuery. Animation properties are passed using an object literal. Sarah walks through the syntax and also demonstrates the different built-in easing functions.

Greensock has the ability to stagger animations. This code is much simpler and more customizable than the CSS equivalent. Greenback can also set and animate CSS properties. After a quick demonstration, Sarah discusses why controlling CSS properties from Greensock can be useful.

One of the most powerful features of the Greensock animation library is the ability to create Timeline objects. Timelines are a sequence of animations that can be paused, reversed, sped up, slowed down, and synchronized with other timelines. Sarah walks through the syntax for creating timelines and shares a few examples.

In this exercise, you will animate an SVG object with the Greensock Animation Platform and make it responsive.

In response to a few audience questions, Sarah spends a few minutes demonstrating her Illustrator SVG workflow. She breaks up a logo into layers, exports the SVG code, and optimizes it with SVGOMG.

UI/UX animations make the transitions between contexts more obvious and meaningful. Whether hiding navigation or submitting a form, animations can add a sense of purpose and fill any delays that may exist between screens. Sarah shares a few example and gives some guidelines for when to use animations.

Animations triggered based on user interaction also are helpful for context shifts. Whether using vanilla JS or a library like jQuery, animations can be hooked into DOM events. Sarah walks through a could simple examples of user-driven animations. Then she shows more complex responsive animations that combine interactivity and the Greensock animation library.

Sarah shares a few examples of animations that involve a draggable interaction. She looks at using draggable actions to control an animation timeline. She also talks about hit-testing SVG objects.

DrawSVG is a plugin for Greensock. It uses stroke-dasharray and stroke-dashoffset to animate a stroke by drawing dashes along the total length of the stroke.

Motion along a path is a feature of SMIL animations. However, since SMIL has been deprecated, motion along a path will most likely move to CSS. Until then, Sarah recommends using Greensock’s implementation for widest support. The GSAP implementation also supports features like auto rotation and adjusting the curviness.

SplitText is a dependency-free plugin for Greensock that will separate a block of text into groups of characters, lines or words. These groups can then be independently animated. Sarah demonstrates how combining SplitText with a Timeline can lead to rick story-telling animations.

Relative tweens are useful when you want to animate a value from it’s current position. Sarah uses the example of animating color. HSL color values affect the hue, saturation and lightness so applying a relative tween to these values can lead to smooth color transitions.

In this exercise, you will combine with of the effects you just learned to tell a simple story with SVG animation.

One of Sarah’s favorite features of Greensock is the MorphSVG plugin. This plugin can animate points from one shape to the points of another. Sarah shares a few examples of morphing shapes and gives a few tips for animating complex shapes.

In this exercise you will create an SVG graphic with a shape morph.

In response to an audience question, Sarah talks about her process of storyboarding animations. She also answers a question about finding the coordinates for a PolyLine.

Sarah wraps up the course with a few resources and some additional tips for building a strong foundation around SVG animation. She also stresses the benefit of social coding and how that can help increase the rate of learning.