Chapter 01

Welcome to The Ultimate GSAP Course

Welcome to the World of Modern Web Animation
Prerequisites
Emotional Design: The Business Value of Animation

Chapter 02

How To Get the Most out of This Course

Meet Adrian, Your Instructor
Get the Most Out of This Course
Access to a Private 24/7 Community
Environment Setup
Our Workflow

Chapter 03

Getting Started with GSAP

Your First Animation
Committing to GitHub
Targeting Elements
Understanding properties
Understanding methods
Getting Started With GSAP Interview

Chapter 04

Easing: Making Animations Feel Natural

What is Easing?
Power Easing
Sine Easing
Back Easing
Bounce Easing
Elastic Easings
Expo Easing

Chapter 05

Core Animation Methods

Learn to
Learn from
Learn fromTo
Learn Stagger
Learn Set
GSAP Core Animation Methods Interview

Chapter 06

Timeline

Introduction to Timelines
Create Your First Timeline
Controlling the Timeline – play, pause, reverse, restart
Position Parameter
Staggered Animations with Timelines
GSAP TImelines Interview

Chapter 07

ScrollTrigger

Introduction to ScrollTrigger
Create Your First ScrollTrigger Animation
Scrubbing the Animation
Pinning Elements
GSAP ScrollTrigger Interview

Chapter 08

Build & Deploy a GTAVI Website | GSAP Course

Introduction
App Setup & Installation
Hero Section
FirstVideo
Jason Duval
SecondVideo
Lucia Caminos
PostCard
Final Video
Outro Section

Chapter 09

Emotional Design Case Studies

Why companies pay for this skillset
How emotional design improves KPI
Portfolio projects that showcase this
Apple Layered scroll transitions
Apple Hero product reveals
Subtle easing/timing strategies
Duolingo Micro-rewards
Habit-forming feedback loops
Stripe Button feedback loops
Stripe's form field animations that reduce anxiety
Revolut's Design for Trust and Premium Feel
How Instagram Designs for Dopamine
How Phantom Made Crypto Feel Human with Motion
Airbnb’s Emotional Animation System
GSAP Emotional Design Interview

Course

Pinning Elements

We’ve seen how to animate elements based on scroll position. But what if you want an element to stay stuck in place for a moment while the rest of the page scrolls around it? Sample image That’s exactly what pinning does! It’s perfect for sticky hero sections, dramatic reveals, or dynamic transitions that hold the user’s focus. ## What is Pinning?