Introduction
Why JavaScript animations?
()
The GreenSock Animation library
()
1. SVG Basics for Animation
SVG shapes, paths, and commands
()
Properly group an SVG for animation
()
Export and Optimize an SVG
()
Challenge: Group and export an SVG for animation
()
Solution: Group and export an SVG for animation
()
2. GreenSock Syntax
Tween a DOM element with the gsap.method()
()
Use the gsap.set() method
()
Stagger animations with GreenSock
()
Control multiple tweens with gsap.timeline()
()
Adding defaults to clean up timeline animations
()
Change an animation with built-in eases
()
Challenge: Animate the Hero SVG
()
Solution: Animate the Hero SVG
()
3. Use the ScrollTrigger Plugin
Adding GreenSock plugins to your project
()
Select a trigger for a scroll animation
()
Control your animation with the start and end parameters
()
Add markers to debug your scroll animation
()
Scrub animations in view
()
Challenge: Add ScrollTrigger animation to the About section
()
Solution: Add ScrollTrigger animation to the About section
()
4. Create Complex Animations with a Main Timeline
Create reusable functions for flexibility
()
Set up a main timeline animation
()
Positioning animations in a timeline
()
Conclusion
What else can GreenSock do?
()