YoVDO

Learning JavaScript Animations with GreenSock

Offered By: LinkedIn Learning

Tags

Javascript Courses Web Development Courses Web Design Courses SVG Animation Courses

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

Taught by

Christina Gorton

Related Courses

Software as a Service
University 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