GSAP Animation Glossary
Essential terminology for understanding GSAP and web animation. 65 terms defined.
3
- 3d Transform
- Using CSS 3D transforms (rotateX, rotateY, perspective) to create depth and dimensional effects.
- 3d Transforms
- Animation technique for 3d transforms effects. GSAP Vault includes 2 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 2 effects using this technique.
- Css
- Animation technique for css effects. GSAP Vault includes 1 effect using this technique.
- Css Animation
- Animation technique for css animation effects. GSAP Vault includes 1 effect using this technique.
- Cursor Effects
- Animation technique for cursor effects effects. GSAP Vault includes 4 effects using this technique.
D
- Decode
- Animation technique for decode effects. GSAP Vault includes 1 effect using this technique.
- 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.
- Entrance Animation
- Animation technique for entrance animation effects. GSAP Vault includes 2 effects using this technique.
F
- Filter
- Animation technique for filter effects. GSAP Vault includes 1 effect using this technique.
- Fisheye
- Animation technique for fisheye effects. GSAP Vault includes 1 effect using this technique.
- Flip Animation
- Animation technique for flip animation effects. GSAP Vault includes 1 effect using this technique.
- Flip Card
- Animation technique for flip card effects. GSAP Vault includes 1 effect using this technique.
- Flow Field
- Animation technique for flow field effects. GSAP Vault includes 1 effect using this technique.
G
- Glitch
- Animation technique for glitch effects. GSAP Vault includes 1 effect using this technique.
- Grid Animation
- Animation technique for grid animation effects. GSAP Vault includes 1 effect 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
- 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 1 effect using this technique.
- Infinite Loop
- Animation technique for infinite loop effects. GSAP Vault includes 1 effect 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").
- Layout Transition
- Animation technique for layout transition effects. GSAP Vault includes 1 effect using this technique.
- 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 1 effect using this technique.
- Liquid Distortion
- Animation technique for liquid distortion effects. GSAP Vault includes 1 effect using this technique.
M
- Marquee
- Horizontally scrolling text or content that loops infinitely, often used for announcements or branding.
- 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 2 effects using this technique.
- Micro Interactions
- Animation technique for micro interactions effects. GSAP Vault includes 2 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 1 effect using this technique.
- Morphing
- Smoothly transitioning between different shapes or paths, often using SVG or clip-path.
- Mouse Follow
- Animation technique for mouse follow effects. GSAP Vault includes 1 effect using this technique.
O
- Organic Motion
- Animation technique for organic motion effects. GSAP Vault includes 1 effect using this technique.
P
- 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.
- Physics
- Animation technique for physics effects. GSAP Vault includes 3 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.
- Progress Tracking
- Animation technique for progress tracking effects. GSAP Vault includes 1 effect using this technique.
Q
- QuickTo
- Animation technique for quickto effects. GSAP Vault includes 2 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.
- Rgb Split
- Animation technique for rgb split effects. GSAP Vault includes 1 effect using this technique.
S
- Scramble
- Animation technique for scramble effects. GSAP Vault includes 1 effect using this technique.
- Scroll Hijack
- Animation technique for scroll hijack effects. GSAP Vault includes 1 effect 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.
- 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 technique for scrub effects. GSAP Vault includes 4 effects using this technique.
- 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.
- Shared Element
- Animation technique for shared element effects. GSAP Vault includes 1 effect using this technique.
- Split Text
- Animation technique for split text effects. GSAP Vault includes 1 effect 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 Filters
- Animation technique for svg filters effects. GSAP Vault includes 1 effect using this technique.
T
- Text Animation
- Animating text content through effects like typing, scrambling, splitting into characters/words, or morphing between strings.
- 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().
- 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().
V
- Viewport Aware Ticker
- Animation technique for viewport aware ticker effects. GSAP Vault includes 1 effect using this technique.
W
- Webgl Shader
- Animation technique for webgl shader effects. GSAP Vault includes 1 effect using this technique.
- Will-change
- A CSS property that hints to browsers which properties will animate, allowing optimization. GSAP manages this automatically in most cases.
- Word Animation
- Animation technique for word animation effects. GSAP Vault includes 1 effect using this technique.
- Wrap
- Animation technique for wrap 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.