CF

ScrollTrigger Express

10h 31m 38s
English
Paid

ScrollTrigger Express is a 52-lesson 10 hours 31 minutes self-paced course by Creative Coding Club. ScrollTrigger is the most revolutionary GreenSock plugin to date.

Course facts

Lessons
52
Duration
10 hours 31 minutes
Level
All levels
Language
English
Updated
Instructor
Creative Coding Club
Price
Premium

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.

Who teaches ScrollTrigger Express? Creative Coding Club

Creative Coding Club thumbnail

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.

What lessons are included in ScrollTrigger Express?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 52 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Get Started in 3 Easy Steps
All Course Lessons (52)
#Lesson TitleDurationAccess
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 subscription

What courses are similar to ScrollTrigger Express?

More courses by Creative Coding Club

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'.