Learning JavaScript Animations with GreenSock
1h 46mBeginner2021-10-14
Authors
Christina Gorton
Web Development Instructor and Front-End Developer
Course details
If you're building animations for the web, odds are good you're at least a little familiar with GreenSock. The Greensock JavaScript animation library provides a wide variety of tools and controls for creating animation on the web. While CSS animations allow you to make simple transformations and toggle the state of UI elements in an application, with JavaScript you can create complex animations and advanced effects, control the timing of animations, and control when animations occur. In this course, Christina Gorton gets you started with JavaScript animations, showing you how to work with SVGs, animate them with GreenSock, and create a portfolio page complete with JavaScript animations on scroll.
Skills covered
GreensockSVGW3CWeb GraphicsJavaScriptWeb DesignOracleLearningProgramming LanguagesOpen SourceSoftware Development
Concepts
0. Introduction
- 01 - Why JavaScript animations
- 02 - The GreenSock Animation library
1. SVG Basics for Animation
- 03 - SVG shapes, paths, and commands
- 04 - Properly group an SVG for animation
- 05 - Export and Optimize an SVG
- 06 - Challenge - Group and export an SVG for animation
- 07 - Solution - Group and export an SVG for animation
2. GreenSock Syntax
- 08 - Tween a DOM element with the gsap.method()
- 09 - Use the gsap.set() method
- 10 - Stagger animations with GreenSock
- 11 - Control multiple tweens with gsap.timeline()
- 12 - Adding defaults to clean up timeline animations
- 13 - Change an animation with built-in eases
- 14 - Challenge - Animate the Hero SVG
- 15 - Solution - Animate the Hero SVG
3. Use the ScrollTrigger Plugin
- 16 - Adding GreenSock plugins to your project
- 17 - Select a trigger for a scroll animation
- 18 - Control your animation with the start and end parameters
- 19 - Add markers to debug your scroll animation
- 20 - Scrub animations in view
- 21 - Challenge - Add ScrollTrigger animation to the About section
- 22 - Solution - Add ScrollTrigger animation to the About section
4. Create Complex Animations with a Main Timeline
- 23 - Create reusable functions for flexibility
- 24 - Set up a main timeline animation
- 25 - Positioning animations in a timeline
Conclusion
- 26 - What else can GreenSock do