Learning JavaScript Animations with GreenSock
Offered By: LinkedIn Learning
Course Description
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?
Taught by
Christina Gorton
Related Courses
Software as a ServiceUniversity of California, Berkeley via Coursera Intro to Computer Science
University of Virginia via Udacity Web Development
Udacity Software Engineering for SaaS
University of California, Berkeley via Coursera CS50's Introduction to Computer Science
Harvard University via edX