SVG Essentials & Animation, v2
Table of Contents
Introduction & SetupSarah 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
What is SVG?Sarah provides an overview of what SVG is, and what it can do.
SVG Support & PerformanceSarah debunks the belief that SVG is not widely supported in the browser, and motivates the point that SVG helps a website's performance.
The Antidote to Positioning in CSSSarah makes the argument that SVG takes the pain out of positioning in CSS, and also points out its' use in loaders.
Platonic ShapesSarah breaks down the rectangle, circle, polygon, and line platonic SVGs.
viewBox & ResponsiveSarah explains what the viewBox is, and how it reacts when the width is changed.
preserveAspectRatioSarah introduces preserveAspectRatio's meet, slice, and none parameters.
Paths, Groups, & PolylinesSarah introduces open and closed paths, groups, and polylines. A cheatsheet for path data, and curve commands is also reviewed.
Animated Bézier Curves & Template LiteralsSarah introduces a resource to help understand animated Bézier Curves, and demonstrates how to use template literals to create animated lines.
AccessibilitySarah details how to make an SVG readable to screen readers, and introduces several resources to read further on the subject.
Optimizing & BuildingSarah discusses several methods to reduce the file size of an SVG, even with many data points.
Constructing an SVGSarah shows how to effectively group objects for animation in Adobe Illustrator.
Starting an SVGSarah walks through the process of starting an SVG
PrototypingSarah discusses the advantage of low resolution prototyping.
Planning an Animation ExerciseStudents are instructed to get an SVG from the repo, and create 3 thumbnails to form a storyboard.
Planning an Animation ReviewStudents talk through their creations.
Animation Support BreakdownSarah gives a quick refresher on keyframes in CSS animation, and warns of a few "gotchas".
Differences in FunctionalitySarah highlights some key differences in property names, and functionality of the object in SVG versus CSS.
Why SVG?Sarah motivates why an SVG is better for drawing on the web.
Transform-OriginSarah demonstrates that an SVG rotates around a different axis by default than what is assumed.
Animate an SVG ExerciseSarah instructs students to take the storyboard that was created in the previous exercise, and make it move.
SVG Tools and Ideas Q&AQuestions are asked about open source SVG animation software, and where ideas for SVGs can come from.
SpritesSarah briefly discusses what SVG Sprites are, and how they can be used.
Atmospheric & Elemental MotionSarah explains how elemental motion can allow what seems like a complicated image to be animatable, and addresses a limitation of CSS animation.
Tools OverviewSarah 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.
Performance & GSAPSarah discusses hardware acceleration versus control, and introduces GreenSock by introducing several ways that it improves workflow.
TweenMax SyntaxSarah introduces basic GSAP syntax.
StaggerSarah compares how to implement stagger in CSS, SASS, and GSAP. It's demonstrated how simple it is to implement a stagger in GSAP.
GSAP Monster DemoSarah uses a CodePen to demonstrate how to utilize the TweenMax library.
Cycle StaggerSarah walks through the code to produce cycle stagger.
Setting CSS PropertiesSarah 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.
Comments on D3Sarah briefly discusses the usage of using D3 while using GreenSock.
TimelineSarah discusses what timelines can do, the position parameter, nesting timelines, prevent momentary display, and percentage based transforms.
GSAP DemoSarah live codes the animation of several boxes using GreenSock.
GSAP ExerciseStudents are instructed to take an SVG and animate it with GreenSock.
UI vs Standalone AnimationSarah discusses the purpose of a UI Animation that differentiates it from a standalone animation.
Social Engineering with AnimationSarah explains how to use animation to help improve the user experience with anticipatory cues, color accents, and standalone SVGs.
Context SwitchingSarah shows some examples where animation helps to switch the context of what the user is viewing.
Improving an Existing UI DemoSarah demonstrates how a travel website's UI could be improved, and uses animation to improve it.
Interaction & GSAP Timeline FunctionsSarah gives an overview of commonly used useful functions.
Interaction DemoSarah demonstrates how interaction and timeline functions could be used to create a machine that puts a teddy bear together.
DraggableSarah introduces a plugin that allows for actions such as testing whether objects are touching each other, momentum effects, and locking movement to an axis.
Interactive ExerciseSarah instructs students to take the last exercise, and make it interactive.
DrawSVGSarah introduces a plugin for GSAP that allows the user to progressively reveal (or hide) the stroke of an SVG.
Motion Along a PathSarah introduces a plugin that allows a more natural look to an animation.
Curviness & RotationSarah introduces the curviness and rotation parameters.
Animating TextSarah discusses how to use SplitText, and briefly discusses how to make gradients more performant.
Relative Color ValuesSarah 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.
Creating a Story ExerciseSarah instructs students to use two elements from the previous section to tell a simple story with SVG animation.
MorphSVGSarah introduces a tool that allows user to morph between SVGs.
Bonus DemosSarah demonstrates several more Codepens that demonstrate the capabilities of Greensock and Greensock plugins.
Shape Morph ExerciseSarah instructs students to incorporate a shape morph into the previous exercise result.
Clipping & MaskingSarah introduces clipping and masking as ways to make objects partially or wholly disappear in animations.
viewBoxSarah reviews viewBox and how to grab the coordinates of it to interact with its parameters.
svgOriginSarah introduces svgOrigin as a way to move an object about an origin.