Scrollytelling 101
- Buy now
- Learn more
1. An Introduction to Scrollytelling

Course Intro and Walkthrough
Introduction: Quiz
Introduction: Resources
2. Installation & Setup!

Setting Up Your Coding Environment & Installing GSAP
Installation & Setup: Quiz
Installation & Setup: Resources
3. GSAP Core Fundamentals

Learning the Important GSAP Basics
GSAP Core Fundamentals: Quiz
GSAP Core Fundamentals: Resources
Bonus!
4. GSAP ScrollTrigger Fundamentals

Learn the Important ScrollTrigger Basics
GSAP ScrollTrigger Fundamentals: Quiz
GSAP ScrollTrigger Fundamentals: Resources
5. Creating a Scrollytelling Project With Floated Images

Creating the HTML and CSS
Creating the HTML and CSS: Quiz
Bringing the Images to Life With GSAP Animations
Bringing the Images to Life With GSAP Animations: Quiz
Triggering Animations on Scroll
Triggering Animations on Scroll: Quiz
Creating a Scrollytelling Project With Floated Images: Resources
6. Telling a Chronological Story

Setting Up the HTML and CSS
Setting up GSAP Animations with ScrollTrigger
Setting up GSAP Animations with ScrollTrigger: Quiz
Telling a Chronological Story: Resources
7. How to Create Drama with Text!

Project Intro
Project Intro: Quiz
Setting Up the HTML and CSS
Setting up GSAP Animations with ScrollTrigger
Setting up GSAP Animations with ScrollTrigger: Quiz
Creating Drama with Text!: Resources
8: Creating a Dynamic Scrubbing Text Animation

Creating a Dynamic Scrubbing Text Animation
Creating a Dynamic Scrubbing Text Animation: Quiz
Creating a Dynamic Scrubbing Text Animation: Resources
9: Creating a Featured Quote Animation

Setting Up the HTML and CSS
Setting Up the HTML and CSS: Quiz
Bringing the Quote to Life With GSAP Animations
Bringing the Quote to Life With GSAP Animations: Quiz
Setting up GSAP Animations with ScrollTrigger
Setting up GSAP Animations with ScrollTrigger: Quiz
Creating a Featured Quote Animation: Resources
10. Aside: Exploring the Pros and Cons of Scrollytelling

WTF is Scrolljacking?
11. Highlighter Text Animation Project

Creating a Highlighter Text Animation
12. Retro '70s Text Animation Project

Creating a Retro '70s Text Animation
13. Text Reveal Animation Project

Creating a Text Reveal Animation
14. Credits/Informational Grid Project

Project Intro
Setting Up the Grid
Adding the Images
Displaying Informational Text
Setting Up Tweens With JavaScript
Incorporating ScrollTrigger
The Advanced Stagger Object
onStart and onReverseComplete
Defining the Stagger Order
Exploring the Stagger Ease Property
Fine-Tuning the Images
Media Queries for a Responsive Grid
15. "Meet the Team" Grid Using Advanced Staggers

Project Intro
Setting Up The HTML
Setting Up The CSS
Using gsap.set To Create a Tween
Introducing the "Grid" Property
Using the "Auto" Keyword for Responsive Grids
Restricting Staggers Using the “Axis” Property
Incorporating ScrollTrigger
Animating the Heading with onStart
16. "Before" and "After" Image Animations

Project Intro
Setting Up the "After" Image
The "Reveal Effect" Illusion
Understanding the Animation: a Deep Dive
Overlapping Images with Absolute Positioning
Controlling the Animation With Scrubbing
17. Horizontal Scrolling - Image Gallery Project

Project Intro
Setting Up the HTML and Images
Styling the Image Gallery With CSS
Dynamically Animating xPercent
Incorporating ScrollTrigger
Fine-Tuning the Scrubbing-Speed
Adding Scroll Snapping
Incremental Snap Values
The Dynamic Scroll Snap Formula
18. Bonus: Using GSAP's ScrollTo Plugin for Page Navigation

Project Intro
GSAP ScrollTo Installation and Setup
Setting Up the HTML
Setting Up the CSS
Working with ScrollTo and JavaScript
19. Where To Go From Here

Where To Go From Here
Where To Go From Here: Resources
Bonus!

12. Retro '70s Text Animation Project

1 Lesson