Learning JavaScript Animations with GreenSock

Go to class
Write Review

Free Online Course: Learning JavaScript Animations with GreenSock provided by LinkedIn Learning is a comprehensive online course, which lasts for 1-2 hours worth of material. The course is taught in English and is free of charge. Upon completion of the course, you can receive an e-certificate from LinkedIn Learning. Learning JavaScript Animations with GreenSock is taught by Christina Gorton.

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
    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?