Overview
-
Learn how to use the GreenSock animation library in JavaScript to take your web animations to the next level.
Syllabus
-
Introduction
- Why JavaScript animations?
- The GreenSock Animation library
- 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
- 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
- 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
- Create reusable functions for flexibility
- Set up a main timeline animation
- Positioning animations in a timeline
- What else can GreenSock do?
