Scrollytelling 101

$34.99

Scrollytelling 101

Closed
Course
88 Lessons

Create Awesome Scroll-Based Web Animations with GSAP + ScrollTrigger! Learn these cutting-edge techniques now to stand out from the competition and take your developer portfolio to the next level! 👨🏻‍💻 Created by The Code Creative 🕑 Last updated 01/2025 🌐 English This course includes: 🖥 4+ hours of video lessons, quizzes, and example resources Requirements: Basic knowledge of HTML/CSS/JavaScript

Buy Now

1. An Introduction to Scrollytelling

Course Intro and Walkthrough

5 mins
384 MB

Preview

Introduction: Quiz

Introduction: Resources

2. Installation & Setup!

Setting Up Your Coding Environment & Installing GSAP

5 mins
159 MB

Installation & Setup: Quiz

Installation & Setup: Resources

3. GSAP Core Fundamentals

Learning the Important GSAP Basics

7 mins
251 MB

GSAP Core Fundamentals: Quiz

GSAP Core Fundamentals: Resources

Bonus!

4. GSAP ScrollTrigger Fundamentals

Learn the Important ScrollTrigger Basics

8 mins
151 MB

GSAP ScrollTrigger Fundamentals: Quiz

GSAP ScrollTrigger Fundamentals: Resources

5. Creating a Scrollytelling Project With Floated Images

Creating the HTML and CSS

11 mins
1020 MB

Creating the HTML and CSS: Quiz

Bringing the Images to Life With GSAP Animations

4 mins
299 MB

Bringing the Images to Life With GSAP Animations: Quiz

Triggering Animations on Scroll

9 mins
833 MB

Triggering Animations on Scroll: Quiz

Creating a Scrollytelling Project With Floated Images: Resources

6. Telling a Chronological Story

Setting Up the HTML and CSS

7 mins
443 MB

Setting up GSAP Animations with ScrollTrigger

9 mins
472 MB

Setting up GSAP Animations with ScrollTrigger: Quiz

Telling a Chronological Story: Resources

7. How to Create Drama with Text!

Project Intro

4 mins
68.7 MB

Project Intro: Quiz

Setting Up the HTML and CSS

10 mins
491 MB

Setting up GSAP Animations with ScrollTrigger

11 mins
533 MB

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

7 mins
276 MB

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

13 mins
914 MB

Setting Up the HTML and CSS: Quiz

Bringing the Quote to Life With GSAP Animations

7 mins
326 MB

Bringing the Quote to Life With GSAP Animations: Quiz

Setting up GSAP Animations with ScrollTrigger

6 mins
608 MB

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?

5 mins
441 MB

Preview

11. Highlighter Text Animation Project

Creating a Highlighter Text Animation

11 mins
751 MB

12. Retro '70s Text Animation Project

Creating a Retro '70s Text Animation

15 mins
653 MB

13. Text Reveal Animation Project

Creating a Text Reveal Animation

12 mins
432 MB

14. Credits/Informational Grid Project

Project Intro

2 mins
112 MB

Preview

Setting Up the Grid

9 mins
214 MB

Adding the Images

3 mins
231 MB

Displaying Informational Text

6 mins
374 MB

Setting Up Tweens With JavaScript

5 mins
255 MB

Incorporating ScrollTrigger

3 mins
177 MB

The Advanced Stagger Object

3 mins
115 MB

onStart and onReverseComplete

4 mins
210 MB

Defining the Stagger Order

4 mins
210 MB

Exploring the Stagger Ease Property

4 mins
311 MB

Fine-Tuning the Images

3 mins
166 MB

Media Queries for a Responsive Grid

2 mins
44.2 MB

15. "Meet the Team" Grid Using Advanced Staggers

Project Intro

2 mins
159 MB

Preview

Setting Up The HTML

3 mins
153 MB

Setting Up The CSS

6 mins
224 MB

Using gsap.set To Create a Tween

2 mins
68.7 MB

Introducing the "Grid" Property

5 mins
257 MB

Using the "Auto" Keyword for Responsive Grids

2 mins
98.3 MB

Restricting Staggers Using the “Axis” Property

2 mins
59.9 MB

Incorporating ScrollTrigger

1 min
31.8 MB

Animating the Heading with onStart

2 mins
89.9 MB

16. "Before" and "After" Image Animations

Project Intro

3 mins
218 MB

Setting Up the "After" Image

2 mins
151 MB

The "Reveal Effect" Illusion

4 mins
318 MB

Understanding the Animation: a Deep Dive

3 mins
236 MB

Overlapping Images with Absolute Positioning

3 mins
207 MB

Controlling the Animation With Scrubbing

4 mins
430 MB

17. Horizontal Scrolling - Image Gallery Project

Project Intro

2 mins
132 MB

Preview

Setting Up the HTML and Images

3 mins
210 MB

Styling the Image Gallery With CSS

5 mins
413 MB

Dynamically Animating xPercent

4 mins
362 MB

Incorporating ScrollTrigger

2 mins
212 MB

Fine-Tuning the Scrubbing-Speed

4 mins
347 MB

Adding Scroll Snapping

2 mins
182 MB

Incremental Snap Values

3 mins
203 MB

The Dynamic Scroll Snap Formula

2 mins
161 MB

18. Bonus: Using GSAP's ScrollTo Plugin for Page Navigation

Project Intro

1 min
91.7 MB

GSAP ScrollTo Installation and Setup

1 min
46.8 MB

Setting Up the HTML

2 mins
107 MB

Setting Up the CSS

4 mins
277 MB

Working with ScrollTo and JavaScript

6 mins
418 MB

19. Where To Go From Here

Where To Go From Here

2 mins
120 MB

Where To Go From Here: Resources

Bonus!

67 KB

Testimonials

🙂 Thanks for the expert instruction! I just finished the Scrollytelling class and I highly recommend it. Looking forward to more in the future, thanks again.

John Brady

Website

Gregg addresses the points that you will encounter in real life projects. No matter what JavaScript library you are using or planning to use, Gregg's courses are essential for any kind of front-end development. I took the first course and went back to Gregg's website and purchased the other ones. I wish I knew about Gregg's courses many years ago.

DH

Gregg does a great job of clarifying web concepts, especially on the DOM. His teaching is broken down into easily digestible lessons with a welcome touch of humor. I recommend his courses without any appeal, the quality is 100% guaranteed.

Jean-Patrice Calvez

Excellent work, thank you for sharing your knowledge and not just writing code with some background music!

Michel Franco

What I love about Gregg's videos is that they are not only inviting and easy to follow, but they're full of so many little gems; awesome insights and tricks that aren't even the topic of the video just extra embedded gem

Frazer Kirkman

Just a big thank you for this amazing course, I learned a lot, and I am confident to implement some of those techniques in my future projects, my portfolio for example. Your way of teaching is nice, funny and really easy to follow even for a non-English native speaker as I am. And some of the tips you gave us during some lessons are just perfect.

Frederic Guerra

Frequently asked questions

Who is this course suitable for?

This course is suitable for web developers and designers who are interested in learning how to create dynamic, engaging animations for the web. No prior experience with GSAP or ScrollTrigger is required.

What topics does this course cover?

This course covers the fundamentals of GSAP, ScrollTrigger, and creating various scrollytelling projects such as floating images, chronological stories, dynamic text animations, and more.

How long is the course?

The course is comprised of 81 lessons and includes over 240 minutes of video content. You can take the course at your own pace and go through the sections and lessons as many times as you need to!

Are there any prerequisites for this course?

You should have basic knowledge of HTML, CSS, and JavaScript before taking this course.

What is the format of the course?

The course is composed of several sections containing video lessons, quizzes, code snippets, and resources. The videos are short and concise, making it easy to follow along and absorb the content. The quizzes reinforce your learning and help you retain the information.

How long will I have access to the course?

You’ll have lifetime access to this course for as long as it exists online, on this platform, or any other platform!

Is my purchase/credit card secure?

Yes, Podia(the platform that hosts this course) uses Stripe and PayPal to handle the billing and provide secure encryption for all online transactions.

Meet Your Instructor: Gregg Fine

Meet Gregg Fine, the mastermind behind "The Code Creative" - a full-stack web developer who transforms ideas into stunning and impactful websites, e-commerce stores, and web applications for individuals, brands, and agencies alike.

Before immersing himself in the world of web development, Gregg was a sought-after music producer, working with big names in advertising from Calvin Klein to YSL to Old Navy.

Not only does he bring his vast expertise to the table, but he also has a passion for sharing his knowledge. As the host of The Code Creative YouTube Channel, Gregg demystifies the world of web development and helps you understand the latest trends and technologies.

He's also a prolific author, with 20 courses published on macProVideo covering a wide range of topics from coding with the Web Audio API to the intersection of music theory and technology.

Gregg is dedicated to helping you succeed and stay up-to-date in the ever-evolving world of coding. Through his blog, The Code Creative Blog, he provides valuable insights and tips on coding, web development, and SEO.

With Gregg as your guide, you'll feel confident and prepared to tackle any coding challenge that comes your way!