GSAP Animation Glossary
Essential terminology for understanding GSAP and web animation. 81 terms defined.
3
- 3d Transforms
- Using CSS 3D transforms (rotateX, rotateY, perspective) to create depth and dimensional effects.
B
- Before After
- Animation technique for before after effects. GSAP Vault includes 2 effects using this technique.
- Blend Mode
- Animation technique for blend mode effects. GSAP Vault includes 3 effects using this technique.
C
- Callback
- A function that executes at specific points during an animation. GSAP provides onStart, onUpdate, onComplete, and onRepeat callbacks for precise control.
- Canvas
- Animation technique for canvas effects. GSAP Vault includes 9 effects using this technique.
- Chromatic Aberration
- Animation technique for chromatic aberration effects. GSAP Vault includes 2 effects using this technique.
- Click Toggle
- Animation technique for click toggle effects. GSAP Vault includes 24 effects using this technique.
- Clip Path
- Animation technique for clip path effects. GSAP Vault includes 10 effects using this technique.
- Count Up
- Animation technique for count up effects. GSAP Vault includes 13 effects using this technique.
- Countdown
- Animation technique for countdown effects. GSAP Vault includes 2 effects using this technique.
- Cursor Effects
- Custom cursor animations or elements that follow and react to mouse movement.
D
- Draggable
- Elements that can be moved by mouse or touch input, often with momentum and bounds constraints.
E
- Easing
- A function that controls how an animation progresses over time. Linear moves at constant speed; ease-out starts fast and slows down; ease-in-out is slow at both ends. GSAP includes 30+ built-in easing options.
F
- Filter
- Animation technique for filter effects. GSAP Vault includes 7 effects using this technique.
- Flip Layout
- The FLIP technique (First, Last, Invert, Play) for smooth layout animations when elements change position.
G
- Grid Animation
- Animation technique for grid animation effects. GSAP Vault includes 2 effects using this technique.
- GSAP
- GreenSock Animation Platform. A professional-grade JavaScript animation library used by over 11 million websites worldwide. GSAP provides high-performance, cross-browser animations for CSS properties, SVG, canvas, and more.
- gsap.context()
- A method for scoping GSAP animations to a specific DOM container. Essential for React/Vue/Next.js integration as it enables clean cleanup with ctx.revert() when components unmount.
H
- Horizontal Scroll
- Animation technique for horizontal scroll effects. GSAP Vault includes 4 effects using this technique.
- Hover Effect
- Animations triggered by mouse hover, including scaling, color changes, and magnetic attraction effects.
I
- Image Sequence
- Animation technique for image sequence effects. GSAP Vault includes 3 effects using this technique.
- Image Trail
- Animation technique for image trail effects. GSAP Vault includes 2 effects using this technique.
- Infinite Loop
- Seamlessly looping content that creates the illusion of endless scrolling.
K
- Keyboard Navigation
- Animation technique for keyboard navigation effects. GSAP Vault includes 10 effects using this technique.
L
- Labels
- Named positions within a GSAP timeline. Allows jumping to specific points or inserting animations at labeled positions. Created with tl.addLabel("name").
- Lerp
- Linear interpolation. A technique for smoothly transitioning between values, often used for smooth scrolling and mouse following effects. Calculates intermediate values between start and end points.
- Lightbox
- Animation technique for lightbox effects. GSAP Vault includes 2 effects using this technique.
- Load Sequence
- Animations displayed while content loads, including progress indicators and skeleton screens.
M
- Magnetic
- Elements that attract toward or follow the cursor within a certain proximity.
- Marquee
- Horizontally scrolling text or content that loops infinitely, often used for announcements or branding.
- Mask Reveal
- Animation technique for mask reveal effects. GSAP Vault includes 7 effects using this technique.
- matchMedia
- GSAP's responsive animation system. Allows defining different animations for different breakpoints or user preferences (like prefers-reduced-motion). Animations are automatically cleaned up when conditions change.
- Micro Interaction
- Animation technique for micro interaction effects. GSAP Vault includes 13 effects using this technique.
- Modifiers
- GSAP plugin that allows intercepting and modifying animated values before they're applied. Useful for wrapping values, creating infinite loops, or applying custom logic.
- Momentum
- Animation technique for momentum effects. GSAP Vault includes 10 effects using this technique.
- Morphing
- Smoothly transitioning between different shapes or paths, often using SVG or clip-path.
- Motion Path
- Animation technique for motion path effects. GSAP Vault includes 2 effects using this technique.
- Mouse Follow
- Animation technique for mouse follow effects. GSAP Vault includes 6 effects using this technique.
P
- Page Transition
- Smooth animation between states, pages, or component changes.
- Parallax
- An effect where elements move at different speeds as you scroll, creating an illusion of depth. Background elements typically move slower than foreground elements.
- Particle Pooling
- Animation technique for particle pooling effects. GSAP Vault includes 2 effects using this technique.
- Particle System
- Animation technique for particle system effects. GSAP Vault includes 2 effects using this technique.
- Physics
- Animation technique for physics effects. GSAP Vault includes 5 effects using this technique.
- Pinning
- Fixing an element in place while the user scrolls past it. Commonly used for scroll-driven storytelling where content stays visible while animations play. Enabled with pin: true in ScrollTrigger.
- Pointer Effects
- Animation technique for pointer effects effects. GSAP Vault includes 6 effects using this technique.
- Progress Bar
- Animation technique for progress bar effects. GSAP Vault includes 2 effects using this technique.
- Progressive Enhancement
- Animation technique for progressive enhancement effects. GSAP Vault includes 4 effects using this technique.
Q
- QuickTo
- Animation technique for quickto effects. GSAP Vault includes 3 effects using this technique.
- quickTo()
- A GSAP method that creates a reusable function for rapidly updating a single property. More performant than creating new tweens for frequent updates like mouse position tracking.
R
- RAF
- requestAnimationFrame. The browser API for scheduling animations at the optimal refresh rate (typically 60fps). GSAP uses RAF internally for all animations.
S
- Scroll Progress
- Animation technique for scroll progress effects. GSAP Vault includes 2 effects using this technique.
- Scroll Reveal
- Animation technique where elements animate into view as the user scrolls. Can be triggered once or scrubbed with scroll position.
- Scroll Stack
- Animation technique for scroll stack effects. GSAP Vault includes 2 effects using this technique.
- Scroll Storytelling
- Animation technique for scroll storytelling effects. GSAP Vault includes 3 effects using this technique.
- Scrollspy
- Animation technique for scrollspy effects. GSAP Vault includes 3 effects using this technique.
- ScrollTrigger
- A GSAP plugin that connects animations to scroll position. It enables scroll-driven animations, scrubbing (progress tied to scroll), pinning (fixing elements during scroll), and triggering animations at specific scroll points.
- Scrub
- Animation progress tied directly to scroll position. Scrolling controls the animation timeline.
- Scrubbing
- When an animation's progress is directly linked to scroll position. As you scroll down, the animation progresses forward; scroll up and it reverses. Set with scrub: true or scrub: 1 (smoothing factor) in ScrollTrigger.
- Snap
- Animation technique for snap effects. GSAP Vault includes 2 effects using this technique.
- Split Flap
- Animation technique for split flap effects. GSAP Vault includes 2 effects using this technique.
- SplitText
- A GSAP plugin that splits text into individual characters, words, or lines that can be animated independently. Essential for creating text reveal and scramble effects. Now free for all users.
- Stagger
- Applying a delay between the start of animations on multiple elements. Creates cascading or wave-like effects. In GSAP, use the stagger property to offset each element's animation start time.
- Svg Animation
- Animation technique for svg animation effects. GSAP Vault includes 6 effects using this technique.
- Svg Draw
- Animation technique for svg draw effects. GSAP Vault includes 3 effects using this technique.
- Svg Filters
- Animation technique for svg filters effects. GSAP Vault includes 3 effects using this technique.
- Svg Line Draw
- Animation technique for svg line draw effects. GSAP Vault includes 6 effects using this technique.
T
- Tabs
- Animation technique for tabs effects. GSAP Vault includes 4 effects using this technique.
- Text Animation
- Animating text content through effects like typing, scrambling, splitting into characters/words, or morphing between strings.
- Timed Stream
- Animation technique for timed stream effects. GSAP Vault includes 2 effects using this technique.
- Timeline
- A sequencing tool for choreographing multiple tweens. Timelines let you control complex animation sequences as a single unit, with methods like play(), pause(), reverse(), and seek().
- Timeline Control
- Animation technique for timeline control effects. GSAP Vault includes 6 effects using this technique.
- Touch Drag
- Animation technique for touch drag effects. GSAP Vault includes 3 effects using this technique.
- Transforms
- CSS properties like translate, rotate, scale that can be animated without triggering layout recalculation. GSAP optimizes transform animations for 60fps performance.
- Tween
- A single animation that changes one or more properties over time. The word comes from "in-betweening" in traditional animation. In GSAP, you create tweens with gsap.to(), gsap.from(), or gsap.fromTo().
- Typesetting
- Animation technique for typesetting effects. GSAP Vault includes 2 effects using this technique.
- Typewriter
- Animation technique for typewriter effects. GSAP Vault includes 3 effects using this technique.
V
- Velocity
- Animation technique for velocity effects. GSAP Vault includes 3 effects using this technique.
- Velocity Reactive
- Animation technique for velocity reactive effects. GSAP Vault includes 8 effects using this technique.
W
- Will-change
- A CSS property that hints to browsers which properties will animate, allowing optimization. GSAP manages this automatically in most cases.
- Wrap
- Animation technique for wrap effects. GSAP Vault includes 2 effects using this technique.
Z
- Zoom
- Animation technique for zoom effects. GSAP Vault includes 2 effects using this technique.
See These Concepts in Action
Browse our effects library to see production implementations of these animation techniques.