[FrontEndMasters] – Advanced SVG Animation
[FrontEndMasters] – Advanced SVG Animation Download
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.
This course and others like it are available as part of our Frontend Masters video subscription.
Table of Contents
- SVG IntroductionSarah 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.
Platonic ShapesThe 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 and GroupsPaths 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.
Optimization, CSS Animation, & SVG DOM
Optimization & CSS AnimationsSVG 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.
Exercise 1In 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 & Rolling backgroundsStep 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.
Atmospheric and Elemental MotionAtmospheric 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.
BenchmarksWhile 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.
CSS PropertiesSarah 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.
Greensock WorkflowSarah 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.
Greensock SyntaxThe 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.
Staggering AnimationsGreensock 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.
TimelinesOne 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.
Exercise 3In this exercise, you will animate an SVG object with the Greensock Animation Platform and make it responsive. – https://github.com/artemist/frontendmasters-svganimation
Illustrator WorkflowIn 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
UI/UX Animation OverviewUI/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.
Animation with InteractionAnimations 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.
Draggable AnimationsSarah 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
Motion Along a PathMotion 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
SplitText PluginSplitText 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 TweensRelative 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.
Exercise 5In this exercise, you will combine with of the effects you just learned to tell a simple story with SVG animation.
MorphSVGOne 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.
Exercise 6In this exercise you will create an SVG graphic with a shape morph.
Storyboarding AnimationsIn 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.
Resources and Course Wrap-UpSarah 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.