CF

GSAP3: Beyond the Basics

8h 25m 41s
English
Paid

Ready to take your GSAP3 skills to the next level? In this course, I'll show you my favorite GSAP3 features that you absolutely need to know to discover new possibilities in creating and managing animations.

GSAP3: Beyond the Basics is designed to help you better understand the full potential of GSAP and master the techniques that professionals use for more complex animations.

About the Author: 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.

Watch Online 54 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Chapter Intro
All Course Lessons (54)
#Lesson TitleDurationAccess
1
Chapter Intro Demo
01:20
2
From Illustrator to Animation
06:49
3
Getter-Setter Methods
05:21
4
Smart Play-Pause-Restart Toggle Button
11:31
5
Scrub Through an Animation with an HTML Input Slider
08:53
6
Tween progress() of an Animation
08:16
7
OOPS: Gotta Fix the Buttons
03:36
8
Callbacks
09:19
9
Build a Timeline Visualizer with getChildren()
09:44
10
killTweensOf()
01:36
11
gsap.utils.wrap()
09:08
12
gsap.registerEffect()
10:47
13
CSSPlugin: Use clearProps to remove inline styles
07:10
14
3D Transforms
10:14
15
Understanding GSAP's immediateRender Property
07:59
16
GSAP Utils Basics Part 1: mapRange()
12:43
17
GSAP Utils Basics Part 2: mapRange() using mouse-distance-from-center
09:02
18
GSAP Utils Basics Part 3: Chaining utility methods with pipe()
08:19
19
GSAP Utils Part 4: Mouse Scroller with mapRange()
09:12
20
Tweening function-based values
08:37
21
Ease-based distribution of start times
10:33
22
Using the weightedRandom() helper function
12:31
23
Using the distribute() utility function
08:23
24
Rubberbander Text Effect
08:16
25
Staggered Staggers. What?
04:55
26
3D Text Rotator
06:24
27
Repeat Values on Tween vs Stagger Object
00:59
28
Using Callbacks in Staggers
16:58
29
Staggered Staggers with No Gap
11:09
30
Linear Navigation with addPause()
05:56
31
Non-Linear Navigation Using Labels
08:31
32
Add a Pause to a Timeline for a Specific Amount of Time
05:45
33
Nested Timelines
07:04
34
Functions That Return Timelines
08:40
35
tweenTo() and tweenFromTo()
11:05
36
File Setup
05:56
37
Animate Panel 1
12:34
38
Create a function to animate 3 panels
08:06
39
Morph curve using AttrPlugin
14:31
40
Title Effects Generator Part 1
21:00
41
Title Effects Generator Part 2
16:15
42
Title Effects Generator Part 3: Wrap Up
24:53
43
SlowMo Overview
06:14
44
In Your Face Effect
11:22
45
Whirl-Around Text Effect
09:58
46
RoughEase Overview
04:27
47
Scary Flicker
07:17
48
Shiver
06:08
49
Configure an elastic ease
04:10
50
Steps Ease for Spritesheet Animations
09:42
51
CustomEase Quick Start
09:14
52
Refactoring Multiple Timelines Into a Single Tween
15:10
53
Staggered Animations Variations on a Theme
17:30
54
Text Effect: Bulge Shine
14:29
Unlock unlimited learning

Get instant access to all 53 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What prerequisites do I need before taking this course?
Before enrolling in this course, you should have a foundational understanding of GSAP3, as it builds on basic concepts. Familiarity with JavaScript and basic animation principles will be beneficial. The course dives into advanced topics like getter-setter methods, timeline visualizers, and 3D transforms, so prior experience with these areas will help you grasp the content more effectively.
What projects will I build during the course?
During the course, you'll work on several projects that utilize advanced GSAP3 features. You'll create a timeline visualizer using getChildren(), build complex animations with 3D text rotators, and develop interactive elements like a smart play-pause-restart toggle button and an HTML input slider to scrub through animations. These projects are designed to help you master professional animation techniques.
Who is the target audience for this course?
This course is ideal for web developers and animators who already have a basic understanding of GSAP3 and wish to enhance their skills. It is tailored for those interested in learning advanced animation techniques and exploring the full potential of GSAP3 for professional and complex animation projects.
How does this course compare to other animation courses?
Unlike introductory courses, this course focuses on advanced GSAP3 features and techniques used by professionals. It covers topics such as immediateRender property, weightedRandom() function, and creating complex animations with nested timelines and custom easing functions. It's designed for those looking to deepen their knowledge beyond basic animations.
What specific tools or platforms will be covered?
The course covers a variety of GSAP3 tools and plugins, including CSSPlugin for removing inline styles, AttrPlugin for morphing curves, and utilities like gsap.utils.wrap() and gsap.registerEffect(). Additionally, you'll explore how to use GSAP's 3D transforms and various easing functions to enhance your animations.
What topics are not covered in this course?
This course does not cover the basics of GSAP3 or introductory animation concepts. It assumes prior knowledge in these areas. Additionally, it does not delve into non-GSAP3 animation libraries or general graphic design principles, focusing exclusively on advanced GSAP3 functionalities.
What is the expected time commitment for the course?
The course consists of 54 lessons, each focusing on different advanced GSAP3 features and techniques. The exact runtime is not specified, but given the depth of topics like nested timelines and ease-based distribution, you should expect to spend several hours completing the lessons and exercises, depending on your prior experience and pace.