ScrollTrigger is the most revolutionary GreenSock plugin to date. With it, you can control all your animations with the precision and performance characteristic of GreenSock tools. There's no longer a need to use third-party tools with limited functionality. In this course, I will explain the main features of ScrollTrigger step-by-step and show you how to elevate your animations to a new level. I have spent over 100 hours studying this plugin and preparing lessons so that you can get started quickly and avoid common mistakes.
ScrollTrigger Express
10h 31m 38s
English
Paid
About the Author: Creative Coding Club
Creative Coding Club is a creative-technology teaching platform run by Carl Andersen, focused on the creative and visual side of programming — generative art, p5.js / Processing, Three.js, shader programming, and the WebGL / GLSL toolchain that sits underneath modern browser graphics work.
The CourseFlix listing carries four Creative Coding Club courses on generative art, creative coding fundamentals, and the visual programming patterns that bridge design and code. Material is paid and aimed at designers and developers building creative-technology work rather than business applications.
Watch Online 52 lessons
0:00
/ #1: Get Started in 3 Easy Steps
All Course Lessons (52)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Get Started in 3 Easy Steps Demo | 10:15 | |
| 2 | Scrub and Pin | 07:31 | |
| 3 | Pinning and pinSpacing Overview | 06:30 | |
| 4 | Pinning Deep Dive | 08:32 | |
| 5 | Pin Spacing | 05:15 | |
| 6 | Pinning Car Project | 05:02 | |
| 7 | Intro to Parallax Scrolling | 09:31 | |
| 8 | Aerial SVG Car Parallax | 09:42 | |
| 9 | ScrollTriggers for Multiple Sections | 13:44 | |
| 10 | Smooth Scrolling with Locomotive Scroll | 20:45 | |
| 11 | Prevent Scroll on Fullscreen Intro | 18:43 | |
| 12 | Back to Top Link: fastScrollEnd and toggleClass | 07:23 | |
| 13 | Change Nav Color on Scroll | 15:50 | |
| 14 | Change Nav Color on Scroll: Part 2 Responsive | 10:42 | |
| 15 | Scroll-Based Reading Progress Bar | 18:05 | |
| 16 | ScrollTo Plugin and ScrollTrigger (Animated Jump Links) | 10:28 | |
| 17 | ScrollTrigger Toggle Animations 4 Ways | 13:56 | |
| 18 | Responsive Scroll-Driven Line-by-Line Text Effect Part 1 | 14:41 | |
| 19 | Responsive Scroll-Driven Line-by-Line Text Part 2 | 11:38 | |
| 20 | Off-Screen Reset | 09:42 | |
| 21 | 3D Rolling Headers | 19:34 | |
| 22 | 3D Rolling Headers: Multiple Headers and Variations | 12:54 | |
| 23 | Scroll-Driven Multi-Colored Line Section Indicators | 15:04 | |
| 24 | Slide-in Panels | 11:04 | |
| 25 | Layered Pinning | 06:01 | |
| 26 | Layered Pinning from Bottom | 06:59 | |
| 27 | SVG Mega Scroll and Follow | 26:26 | |
| 28 | Use ScrollTrigger Callbacks to Control HTML5 Video | 10:05 | |
| 29 | Scoll-Driven SVG Path Follower | 19:38 | |
| 30 | Part 1: File setup, Alternating Rows and ScrollTrigger Basics | 17:23 | |
| 31 | Part 2: Offscreen Reset | 07:50 | |
| 32 | Part 3: Mobile Layout | 18:41 | |
| 33 | Introduction: File Setup and Pinning | 14:08 | |
| 34 | Basic Staggered Animation | 07:46 | |
| 35 | Content Sections with Varying Heights | 19:47 | |
| 36 | Responsive Layout | 13:18 | |
| 37 | Using gsap.matchMedia() | 07:03 | |
| 38 | Horizontal Scroll and Pin Part 1 | 08:11 | |
| 39 | Horizontal Scroll: Container Animations | 16:04 | |
| 40 | Horizontal Scroll Triggering Secondary Animations | 19:24 | |
| 41 | Horizontal Scroll: Import SVG Maps and Responsive Issues | 13:03 | |
| 42 | Horizontal Scrolling: Fixing Responsive Issues | 09:31 | |
| 43 | Horizontal Scrolling: SVG Animation | 11:27 | |
| 44 | Part 1: File Setup and Staggered Animation | 10:35 | |
| 45 | Adding 3D Layout and Animation | 16:27 | |
| 46 | Multiple Headers | 08:16 | |
| 47 | Exploring Responsive Issues and Adding ScrollTrigger | 07:57 | |
| 48 | Fixing Responsive Issues | 11:02 | |
| 49 | Basic Mode | 10:01 | |
| 50 | Building a Timeline of Function Calls | 10:46 | |
| 51 | Pro Mode | 10:46 | |
| 52 | Pro Highlight Mode | 06:32 |
Unlock unlimited learning
Get instant access to all 51 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRelated courses
-
Updated 2y agoFramer Motion Recipes
By: Build UIFramer Motion is a popular React animation library. It features both declarative and imperative APIs.3h 8m -
Updated 6mo agoWhimsical Animations
By: Josh ComeauWhimsical Animations helps you build smooth and fun web effects. You will learn how to make small touches and clear moments that guide the user.5h 7m -
Updated 10mo agoWeb Animations Full Course | Build a GTA VI Website & Master GSAP
By: JavaScript Mastery, Adrian HajdinMore than 70% of leading design-oriented companies use GSAP in production. Now you will not only be able to understand their approach, but you will.3h 31m
Frequently asked questions
What are the prerequisites for enrolling in this course?
To get the most out of this course, familiarity with GreenSock Animation Platform (GSAP) basics is recommended. While the course will guide you through ScrollTrigger from the ground up, understanding GSAP will help you follow along with the lessons, such as those involving staggered animations and timeline management.
What projects or animations will I build during the course?
Throughout the course, you'll work on various animation projects, including a 'Pinning Car Project', 'Aerial SVG Car Parallax', and '3D Rolling Headers'. You'll also create a 'Scroll-Based Reading Progress Bar' and implement 'Scroll-Driven Multi-Colored Line Section Indicators', providing you with practical, hands-on experience in using ScrollTrigger.
Who is the target audience for this course?
This course is ideal for web developers and designers who want to enhance their webpages with advanced scrolling animations. It's particularly suited for those who have a basic understanding of GSAP and wish to integrate ScrollTrigger into their projects to create engaging, interactive user experiences.
How does this course compare in depth to other animation courses?
ScrollTrigger Express offers a detailed exploration of the ScrollTrigger plugin with 52 lessons dedicated to its features and capabilities. Unlike general animation courses that cover multiple tools, this course provides a specific focus on ScrollTrigger, including advanced topics like 'Layered Pinning' and 'Horizontal Scroll Triggering Secondary Animations'.
What specific tools or platforms are utilized in the course?
The course primarily uses the GreenSock Animation Platform (GSAP) with a focus on the ScrollTrigger plugin. Additionally, it incorporates 'Smooth Scrolling with Locomotive Scroll' for enhancing scroll experiences and 'gsap.matchMedia()' for responsive design considerations.
What are the limitations or topics not covered in this course?
While the course covers a wide range of ScrollTrigger functionalities, it does not delve into integrating ScrollTrigger with backend technologies or content management systems. The focus remains on front-end animation capabilities, ensuring a thorough understanding of visual effects and interactive elements.
How much time should I expect to dedicate to this course?
The course comprises 52 lessons, and although the total runtime isn't specified, students should anticipate dedicating several hours to complete the material. This includes time for reviewing lessons, practicing animations, and experimenting with projects like 'Pinning Car Project' and 'SVG Mega Scroll and Follow'.