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

User Experience for the Web
Open2Study
Writing for the Web
Open2Study
Web-Engineering I: Grundlagen der Web-Entwicklung
iversity
Human-Computer Interaction Design
University of California, San Diego via Coursera
Ruby مدخل إلى برمجة مواقع الإنترنت باستخدام لغة
Rwaq (رواق)