Skip to main content
CourseFlix

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

Course content

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

Related courses

  • Framer Motion Recipes thumbnail

    Framer Motion Recipes

    By: Build UI
    Framer Motion is a popular React animation library. It features both declarative and imperative APIs.
    3 hours 8 minutes 18 seconds
  • Animations on the web thumbnail

    Animations on the web

    By: Emil Kowalski
    Learn how to craft animations that make people feel something. It's for those that like my style of animations and/or anyone aspiring to improve their skills. T
    2 hours 23 minutes 59 seconds 3 / 5
  • Whimsical Animations thumbnail

    Whimsical Animations

    By: Josh Comeau
    Whimsical Animations helps you build smooth and fun web effects. You will learn how to make small touches and clear moments that guide the user.
    5 hours 7 minutes 31 seconds

Frequently asked questions

What is GSAP3: Beyond the Basics about?
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…
Who teaches GSAP3: Beyond the Basics?
GSAP3: Beyond the Basics is taught by Creative Coding Club. You can find more courses by this instructor on the corresponding source page.
How long is GSAP3: Beyond the Basics?
GSAP3: Beyond the Basics contains 54 lessons with a total runtime of 8 hours 25 minutes. All lessons are available to watch online at your own pace.
Is GSAP3: Beyond the Basics free to watch?
GSAP3: Beyond the Basics is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch GSAP3: Beyond the Basics online?
GSAP3: Beyond the Basics is available to watch online on CourseFlix at https://courseflix.net/course/gsap3-beyond-the-basics. The page hosts every lesson with the integrated video player; no download is required.