[FrontEndMasters] – Advanced SVG Animation

0 319

[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.

Advanced SVG Animation Download
Advanced SVG Animation Download

Table of Contents

SVG Overview

  • 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.
  • 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.
  • 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.

Optimization, CSS Animation, & SVG DOM

  • 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.
  • 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.

SVG Sprites

  • 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.
  • Responsive Sprites

    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

    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.


  • 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.
  • 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.


  • 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.
  • 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.
  • 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.
  • 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.
  • Exercise 3

    In this exercise, you will animate an SVG object with the Greensock Animation Platform and make it responsive. – https://github.com/artemist/frontendmasters-svganimation
  • 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

  • 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.
  • 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.
  • 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

  • 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

  • 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.
  • 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.
  • Exercise 5

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


  • 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.
  • Exercise 6

    In this exercise you will create an SVG graphic with a shape morph.
  • 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.
  • 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.



Advanced SVG Animation Download


If This Post is Helpful to You Leave a Comment Down Below Also Share This Post on Social Media by Clicking The Button Below

You might also like

Leave a Reply

Notify of

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More