SVGs are resolution-independent, scalable for responsive, and easy to navigate with their navigable DOM. Learn how to use this powerful graphic format as well as how to make complex animations for a myriad of use cases across the web.
Sarah Drasner a Senior UX Engineer at Trulia (Zillow Group) and a staff writer for CSS-Tricks.
Advanced SVG Animation
00:00 - 05:12
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/
- 05:13 - 09:30 Platonic Shapes 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.
- 09:31 - 17:33 Paths and Groups 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.
- 00:00 - 05:12 SVG Introduction 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.
Optimization, CSS Animation, & SVG DOM
- 17:34 - 26:21 Optimization & CSS Animations 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.
- 26:22 - 28:46 Exercise 1 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.
- 28:47 - 38:41 Step Animations & Rolling backgrounds 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.
- 50:53 - 57:09 Atmospheric and Elemental Motion 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.
- 57:10 - 01:09:41 Benchmarks 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.
- 01:09:42 - 01:12:48 CSS Properties 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.
- 01:12:49 - 01:21:53 Greensock Workflow 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.
- 01:21:54 - 01:27:53 Greensock Syntax 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.
- 01:27:54 - 01:31:09 Staggering Animations 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.
- 01:31:10 - 01:41:42 Timelines 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.
01:41:43 - 01:42:18
In this exercise, you will animate an SVG object with the Greensock Animation Platform and make it responsive.
- 01:42:19 - 01:48:03 Illustrator Workflow 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 Animation vs. Standalone
- 01:48:04 - 01:58:08 UI/UX Animation Overview 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.
- 01:58:09 - 02:07:28 Animation with Interaction 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.
- 02:07:29 - 02:16:54 Draggable Animations 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 and Motion Along a Path
- 02:16:55 - 02:19:51 DrawSVG 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.
- 02:19:52 - 02:24:34 Motion Along a Path 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.
Animating Text & Relative Color Values
- 02:24:35 - 02:28:51 SplitText Plugin 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.
- 02:28:52 - 02:32:35 Relative Tweens 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.
- 02:32:36 - 02:33:42 Exercise 5 In this exercise, you will combine with of the effects you just learned to tell a simple story with SVG animation.
- 02:33:43 - 02:43:44 MorphSVG 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.
- 02:43:45 - 02:44:09 Exercise 6 In this exercise you will create an SVG graphic with a shape morph.
- 02:44:10 - 02:49:52 Storyboarding Animations 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.
- 02:49:53 - 02:53:46 Resources and Course Wrap-Up 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.