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!
Products
Course
Section
Lesson
Bonus!
Bonus!
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!
Lesson unavailable
Please
login to your account
or
buy the course
.