GSAP 3 Express (FREE)
Get up and running with GreenSock quickly in this course for absolute beginners. I'll guide you through the best parts of the GSAP 3 API: From tweens to timelines.
Instant Access | No Credit Card
If your client asked for the animation below, would you know how to build it?
Hands-on training and in-depth videos to build confidence and competence
There are tons of tutorials and blog posts out there that explain how to make something move or spin with GSAP.
It's not brain surgery.
The GreenSock documentation is terrific and loaded with detailed explanations of specific features.
This training shows you not only what GSAP does but how to actually use it in real projects.
My training removes the confusion and guides you through a series of focused, hands-on lessons that show you how to solve real world animation challenges.
Welcome to the Course
Our Development Environment
GSAP 3 Express Notes and Instructions
GSAP Object: Tweens and Timelines
Basic Tween
from() and fromTo()
Special Properties: Delay and Repeat
Special Property: Ease
Reading Ease Curves
About Me and Creative Coding Club
Special Property: Stagger
Tween Control
Copy of Why from() Tweens Glitch and Stop Working!
Using the GSAP Documentation
Why Timelines are Important
Basic Timeline Intro
Position Parameter Visualizer
Basic Timeline Position
Timeline Control and Labels
Bonus Demos
Simple Rollover / Hover Effects
Rollover / Hover Effects for Multiple Elements
Constant Hover Pulse with Smooth Reset
Project Setup
Basic Animation
Timeline Defaults
GSDevTools
Tweak Timing
Remove Flash of Un-styled Content (FOUC)
Typewriter Effect with TextPlugin
Getting Started with SplitText
SplitText Word by Word
SplitText Line by Line
Percentage-Based Keyframes
Percentage-Based Keyframes Part 2: Benefits, Downsides and Challenges
Hard Edge Gradient Animated Fill
Bug Race in a Single Tween
Scoll-Driven SVG Path Follower
gsap.registerEffect()
In Your Face Effect
Mask-Up / Scale-Down Effect: Chevy Tahoe Ad Exploration
Reveal dots while animation plays
Using CSS Clamp for Responsive Text Sizing
Percentage-based keyframes in GSAP
Being that I release new lessons every week, my students always have access to training on GreenSock's latest features.
This lesson on GSAP's new percentage-based keyframe syntax came out within a week of the feature being available.
Watch the video full screen to see the amount of detail that goes into explaining these important features.
Get up and running today with GSAP's core features through loads of deep-dive lessons like this.
Inside you'll get my follow-up lesson including my deep thoughts on this new syntax and 2 keyframe challenges!
JOIN TODAY FOR FREE