Sarah Drasner
Google
SVG Essentials & Animation, v2
4 hours, 12 minutes CC
Course Description
Learn to build and optimize SVG – the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites. In this course, you'll learn to create immersive graphics and make them alive with animations!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: January 14, 2019
Learning Paths
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 6 minutes
Sarah gives a brief introduction, introduces the repo, giving suggestions for how to get the most out of the course, looking at the codepen setup, and reviewing Greensock plugins.
SVG Anatomy Overview
Section Duration: 38 minutes
Sarah provides an overview of what SVG is, and what it can do.
Sarah debunks the belief that SVG is not widely supported in the browser, and motivates the point that SVG helps a website's performance.
Sarah makes the argument that SVG takes the pain out of positioning in CSS, and also points out its' use in loaders.
Sarah breaks down the rectangle, circle, polygon, and line platonic SVGs.
Sarah explains what the viewBox is, and how it reacts when the width is changed.
Sarah introduces preserveAspectRatio's meet, slice, and none parameters.
Sarah introduces open and closed paths, groups, and polylines. A cheatsheet for path data, and curve commands is also reviewed.
Sarah introduces a resource to help understand animated Bézier Curves, and demonstrates how to use template literals to create animated lines.
Sarah details how to make an SVG readable to screen readers, and introduces several resources to read further on the subject.
CSS Animation
Section Duration: 53 minutes
Sarah discusses several methods to reduce the file size of an SVG, even with many data points.
Sarah shows how to effectively group objects for animation in Adobe Illustrator.
Sarah walks through the process of starting an SVG
Sarah discusses the advantage of low resolution prototyping.
Students are instructed to get an SVG from the repo, and create 3 thumbnails to form a storyboard.
Students talk through their creations.
Sarah gives a quick refresher on keyframes in CSS animation, and warns of a few "gotchas".
Sarah highlights some key differences in property names, and functionality of the object in SVG versus CSS.
Sarah motivates why an SVG is better for drawing on the web.
Sarah demonstrates that an SVG rotates around a different axis by default than what is assumed.
Sarah instructs students to take the storyboard that was created in the previous exercise, and make it move.
Questions are asked about open source SVG animation software, and where ideas for SVGs can come from.
Sarah briefly discusses what SVG Sprites are, and how they can be used.
Sarah explains how elemental motion can allow what seems like a complicated image to be animatable, and addresses a limitation of CSS animation.
GreenSock
Section Duration: 55 minutes
Sarah discusses the pros and cons of both the DOM, and Canvas. CSS/SCSS, CSAP (GreenSock), and React Spring/React-Motion are mentioned as good tools to use for specific use cases.
Sarah discusses hardware acceleration versus control, and introduces GreenSock by introducing several ways that it improves workflow.
Sarah introduces basic GSAP syntax.
Sarah compares how to implement stagger in CSS, SASS, and GSAP. It's demonstrated how simple it is to implement a stagger in GSAP.
Sarah uses a CodePen to demonstrate how to utilize the TweenMax library.
Sarah walks through the code to produce cycle stagger.
Sarah talks through how to set CSS properties in GSAP, and why it might be advantageous to do this instead of writing it in the CSS file.
Sarah briefly discusses the usage of using D3 while using GreenSock.
Sarah discusses what timelines can do, the position parameter, nesting timelines, prevent momentary display, and percentage based transforms.
Sarah live codes the animation of several boxes using GreenSock.
Students are instructed to take an SVG and animate it with GreenSock.
UI/UX Animation
Section Duration: 31 minutes
Sarah discusses the purpose of a UI Animation that differentiates it from a standalone animation.
Sarah explains how to use animation to help improve the user experience with anticipatory cues, color accents, and standalone SVGs.
Sarah shows some examples where animation helps to switch the context of what the user is viewing.
Sarah demonstrates how a travel website's UI could be improved, and uses animation to improve it.
Sarah discusses the importance of showing the difference between states, using JavaScript to detect when an animation should start, and how to think about applying animations across a site.
Sarah gives an overview of commonly used useful functions.
Sarah demonstrates how interaction and timeline functions could be used to create a machine that puts a teddy bear together.
Sarah introduces a plugin that allows for actions such as testing whether objects are touching each other, momentum effects, and locking movement to an axis.
Sarah instructs students to take the last exercise, and make it interactive.
GSAP Extras
Section Duration: 50 minutes
Sarah introduces a plugin for GSAP that allows the user to progressively reveal (or hide) the stroke of an SVG.
Sarah introduces a plugin that allows a more natural look to an animation.
Sarah introduces the curviness and rotation parameters.
Sarah discusses how to use SplitText, and briefly discusses how to make gradients more performant.
Sarah demonstrates how to use HSL values to gradually change a color from one to another for purposes like changing a scene from day to night.
Sarah instructs students to use two elements from the previous section to tell a simple story with SVG animation.
Sarah introduces a tool that allows user to morph between SVGs.
Sarah demonstrates several more Codepens that demonstrate the capabilities of Greensock and Greensock plugins.
Sarah instructs students to incorporate a shape morph into the previous exercise result.
Advanced SVGs
Section Duration: 15 minutes
Sarah introduces clipping and masking as ways to make objects partially or wholly disappear in animations.
Sarah reviews viewBox and how to grab the coordinates of it to interact with its parameters.
Sarah introduces svgOrigin as a way to move an object about an origin.
Conclusion
Section Duration:
Sarah thanks the audience and lets them know where they can send all their awesome Codepens!
Sarah Drasner is a lovely teacher! I have learned a lot about SVG animation in this workshop at Frontend Masters and am already using these new skills in my projects. GSAP is a very powerful tool and I'm super excited to master it.
Alexsander Souza
Alexsander Souza
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops