SVG Essentials & Animation, v2

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!

• Introduction & Setup
• What is SVG?
• SVG Support & Performance
• The Antidote to Positioning in CSS
• Platonic Shapes
• viewBox & Responsive
• preserveAspectRatio
• Paths, Groups, & Polylines
• Animated Bézier Curves & Template Literals
• Accessibility
• Optimizing & Building
• Constructing an SVG
• Starting an SVG
• Prototyping
• Planning an Animation Exercise
• Planning an Animation Review
• Animation Support Breakdown
• Differences in Functionality
• Why SVG?
• Transform-Origin
• Animate an SVG Exercise
• SVG Tools and Ideas Q&A
• Sprites
• Atmospheric & Elemental Motion
• Tools Overview
• Performance & GSAP
• TweenMax Syntax
• Stagger
• GSAP Monster Demo
• Cycle Stagger
• Setting CSS Properties
• Comments on D3
• Timeline
• GSAP Demo
• GSAP Exercise
• UI vs Standalone Animation
• Social Engineering with Animation
• Context Switching
• Improving an Existing UI Demo
• Interaction, JS Detection, & Scaling
• Interaction & GSAP Timeline Functions
• Interaction Demo
• Draggable
• Interactive Exercise
• DrawSVG
• Motion Along a Path
• Curviness & Rotation
• Animating Text
• Relative Color Values
• Creating a Story Exercise
• MorphSVG
• Bonus Demos
• Shape Morph Exercise
• Clipping & Masking
• viewBox
• svgOrigin
• Thanks!