GSAP
Animation · 4 stages · 28 units in the full series · 28 published in English
Series goal
Design GSAP motion that remains stable as timing, layout, and input change.
Prerequisites
DOM, CSS transform, and time
Practice approach and scope
Learning units are not calendar days. Read the explanation and tasks, check the completion criteria, then move on. Use each example as a starting point: change variables and observe the results. Built-in examples and tasks requiring a separate environment are identified separately. Opening an example does not complete a unit.
Existing unit IDs and notes are preserved. The original 01, 02, and 03 examples occupy positions 1, 14, and 28 in the expanded sequence, so the number in the address may differ from the learning order.
Only published English units are linked below. The full series has 28 units.
Learning path
Stage 1 · Tweens and the time model
- 01. Tween and Timeline — Editable example
- 02. Starting and target values — Editable example
- 03. The Time Curve of Ease — Editable example
- 04. Transform and Layout — Editable example
- 05. Stagger Order — Editable example
- 06. Labels and Overlap — Editable example
- 07. Playback Controls — Editable example
Stage 2 · Scrolling and lifecycle
- 08. Context and Restoration — Editable example
- 09. Connecting Native Scroll — Editable example
- 10. Registering ScrollTrigger — Editable example
- 11. Scrub Following — Editable example
- 12. Pin and Document Flow — Editable example
- 13. Refresh and Measurement Timing — Editable example
- 14. Scroll and Lifecycle — Editable example
Stage 3 · Input and accessibility
- 15. MatchMedia Branches — Editable example
- 16. Repeated Input and Overwrite — Editable example
- 17. Pointer and QuickTo — Editable example
- 18. Keyboard Step Navigation — Editable example
- 19. Reduced-Motion Alternatives — Editable example
- 20. Completion Callbacks and Interruption — Editable example
- 21. Nested Timelines — Editable example
Stage 4 · Motion system verification
- 22. Controlling SVG Attributes — Editable example
- 23. Interpolating Canvas Objects — Editable example
- 24. Measuring Frame Cost — Editable example
- 25. Hiding and Returning — Editable example
- 26. Motion Tokens — Editable example
- 27. Cleanup on Failure Paths — Editable example
- 28. Motion Design and Verification — Editable example
Capstone project and deliverables
Integrate keyboard access, reduced motion, and cleanup paths into learning-stage guidance, and write a verification report.
Keep the implementation, run instructions, baseline and changed conditions, failure cases, and recovery steps together. Do not report unmeasured performance or tests you have not run as results.