GSAP Animations

What you will learn

• Describe motion in a controlled manner
• Coordinate multiple steps
• Couple motion to user actions
• Design scroll behavior meaningfully
• Reliably limit motion
• Bring content and motion together

Course content

1. Chapter 1 First Animations

   Describe motion in a controlled manner

   1. Introduction to GSAP
   2. The gsap.to() Method
   3. Duration, Delay, and Easing
   4. Transforming Properties
   5. Debugging Attributes
   6. Mini-Project: Greeting Card

2. Chapter 2 Timelines

   Coordinate multiple steps

   1. Introduction to gsap.timeline()
   2. Sequencing with .to()
   3. Timeline Parameters and Defaults
   4. Timestamps and Overlaps
   5. Timeline Debugging
   6. Mini-Project: Sequenced Product Presentation

3. Chapter 3 Interaction

   Couple motion to user actions

   1. Introduction to Event Listeners with GSAP
   2. Hover Effects with .enter() and .leave()
   3. Controlling Timelines: play(), pause(), and reverse()
   4. Avoiding Animation Queues
   5. Debugging Event Bindings
   6. Mini-Project: Interactive Accordion Menu

4. Chapter 4 ScrollTrigger

   Design scroll behavior meaningfully

   1. Introduction to ScrollTrigger
   2. Triggers and Markers: trigger and start
   3. Scroll Properties: scrub and toggleActions
   4. Predicting Scroll States
   5. ScrollTrigger Debugging
   6. Mini-Project: Scroll-Based Storytelling Section

5. Chapter 5 Robust and Performant

   Reliably limit motion

   1. Performance Optimization with will-change and force3D
   2. Respecting prefers-reduced-motion
   3. Memory Cleanup and gsap.killTweensOf()
   4. Predicting Layout Thrashing
   5. Debugging Memory Leaks and Overlapping Triggers
   6. Mini-Project: Performant and Accessible Dashboard

6. Chapter 6 Landing Page Project

   Bring content and motion together

   1. Structuring the Landing Page
   2. Hero Section with Timeline
   3. Scroll-Based Feature Boxes
   4. Predicting Overall Behavior
   5. Debugging the Integrated Project
   6. Mini-Project: Accessible GSAP Landing Page

How each lesson works

No hour-long videos. Each lesson is a short loop you complete yourself, until the idea sits.

1. Read

   A short explanation and one clear task. Just enough to get going.

2. Write

   You type the code yourself, in a real editor right in the browser.

3. Run

   Run it and see what your program actually does, straight away.

4. Check

   Check tells you whether the task is solved, and what is missing if not.

Good to know

• Nothing to install: editor, output and checks run in your browser tab.
• Start as a guest without an account; your progress stays on this device.
• A free Ostrae account syncs progress and settings across devices and unlocks the MICA coach.

More courses

• C# Fundamentals
• HTML: Structuring Websites
• CSS: Styling Websites
• JavaScript
• Python Fundamentals and Automation
• Git, GitHub and Hosting
• Design for Developers