Learn JavaScript Animation Today
Get up and running with quickly with GSAP.
Go step-by-step through the best parts of the GSAP API while buiding small projects with detailed videos, written instructions, and loads of demos.
Perfect for absolute beginners.
Watch the Intro Video
What you will build
The main goal of this course is to take you from knowing nothing about GSAP to being comfortable hand-coding GSAP's timelines.
Timelines allow you to sequence many animations and control them as a group (just like a video).
Timelines can be used in anything from a simple button rollover to more complex UI animations, to banners, or the thousands of scroll-driven animations you see on award-winning websites.
We'll start with the basics and go through: tweens, easing, special properties, animation controls, and sequencing.
You'll even get some bonus lessons from my paid courses.
Jump on in and join over 10,000 developers who used this course to start their GSAP careers!
RECENTLY ADDED BONUS LESSON
See the Pen hole jumper finished (pro) by Snorkl.tv (@snorkltv) on CodePen.
Course curriculum
-
-
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
-
transformOrigin
-
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
-

About this course
- Free
- 4.5 hours of video content