Learning JavaScript Animations with GreenSock
Release date:2021
Author:Christina Gorton
Skill level:Beginner
Language:English
Exercise files:Yes
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.
0. Introduction
01. Why JavaScript animations
02. The GreenSock Animation library
1. SVG Basics for Animation
01. SVG shapes paths and commands
02. Properly group an SVG for animation
03. Export and Optimize an SVG
04. Challenge- Group and export an SVG for animation
05. Solution- Group and export an SVG for animation
2. GreenSock Syntax
01. Tween a DOM element with the gsap.method()
02. Use the gsap.set() method
03. Stagger animations with GreenSock
04. Control multiple tweens with gsap.timeline()
05. Adding defaults to clean up timeline animations
06. Change an animation with built-in eases
07. Challenge- Animate the Hero SVG
08. Solution- Animate the Hero SVG
3. Use the ScrollTrigger Plugin
01. Adding GreenSock plugins to your project
02. Select a trigger for a scroll animation
03. Control your animation with the start and end parameters
04. Add markers to debug your scroll animation
05. Scrub animations in view
06. Challenge- Add ScrollTrigger animation to the About section
07. Solution- Add ScrollTrigger animation to the About section
4. Create Complex Animations with a Main Timeline
01. Create reusable functions for flexibility
02. Set up a main timeline animation
03. Positioning animations in a timeline
Conclusion
01. What else can GreenSock do
[LinkedIn] Learning JavaScript Animations with GreenSock_Subtitles.7z
Channel
