GSAP animation glossary

Every word the catalogue uses, in plain English, with the products behind each one. 123 terms.

123 terms

3

3d Transforms
rotateX, rotateY, translateZ and perspective, so flat elements tilt, flip and recede in real depth. Set the perspective on the parent, not the moving child, or every element gets its own vanishing point.
In the vault 3D Card Flip Gallery3D Ring GalleryCreative Agency Template and 49 more

A

Ambient
Motion that runs on its own with nothing to trigger it: drifting gradients, slow particle fields, breathing shapes. Kept slow and paused off screen so it costs nothing while nobody is looking.
In the vault Ambient Orb FieldAurora Gradient FieldAnimated Background Beams and 6 more

B

Before After
Two images in one frame with a handle that reveals one over the other. The handle drags with GSAP Draggable and the reveal is a clip-path, so both images stay full size and aligned.
In the vault AI Agent DashboardBefore / After CompareClothing Brand Template and 2 more
Blend Mode
mix-blend-mode and background-blend-mode used as part of the effect: difference cursors, multiply overlays, screen highlights. Composited per frame, so it is the first thing to remove when a page stutters on a phone.
In the vault AI Studio SaaS TemplateAmbient Orb FieldCreative Portfolio Template and 3 more

C

Callback
A function GSAP calls at a point in an animation's life: onStart, onUpdate, onComplete, onRepeat, onReverseComplete. onUpdate is where a proxy value gets written to the DOM.
Canvas
Drawing with the 2D canvas API rather than the DOM, driven by GSAP's ticker. The choice when there are hundreds of moving things, because one canvas repaint beats hundreds of element updates.
In the vault AI Studio SaaS TemplateCanvas Particle FlowCanvas Shape Vortex and 15 more
Carousel
A row of slides moved along one axis, with the current one held in view. The Vault's carousels wrap seamlessly, respond to drag and keyboard, and never rely on the browser's scroll-snap alone.
In the vault 3D Ring GalleryConstruction CompanyCurved Ribbon Slider and 1 more
Checkpoint Navigation
A progress indicator with named stops that both reflects scroll position and jumps to a section when clicked. The dot moves with a scrubbed tween and the labels come from the headings.
In the vault Interactive MapScroll Path JourneyScrollspy Table of Contents
Chromatic Aberration
Splitting the red, green and blue channels of an image or text a few pixels apart, the way a cheap lens does. Done with SVG filters or layered clones offset by GSAP, usually keyed to velocity.
In the vault Curved Ribbon SliderGlitch Text EffectPrism Glass Hero and 5 more
Click State
An element with visibly different states (pressed, active, selected, open) and a tween between them, rather than an instant class swap. The state is still a class or attribute so it works without the animation.
In the vault Bottom Navigation BarDeveloper Portfolio TemplateSegmented Control and 7 more
Click Toggle
One control that switches something between two states and animates the change in both directions: a menu, a switch, a panel. The animation reverses rather than replaying, so rapid clicks never stack up.
In the vault 3D Card Flip Gallery3D Physics Background3D Ring Gallery and 61 more
Clip Path
Revealing or hiding an element by animating its clipping shape (inset, circle, polygon) instead of its opacity. A wipe rather than a fade, and the reason nothing on this site fades in.
In the vault Arch Window RevealArchitecture Firm TemplateAppointment Booking Template and 47 more
Clipboard
Copying text with navigator.clipboard and confirming it visually: the label swaps to a tick, the icon morphs, the button settles back after a beat. The confirmation is the animation.
In the vault Copy to Clipboard ButtonResume TemplateTailwind Component Remixer
Command Palette
A keyboard-first search overlay (Cmd+K) that lists actions and pages, filters as you type, and moves the selection with the arrow keys. Opening, filtering and selecting each get a short tween.
In the vault Admin DashboardCmd+K Command PaletteDocumentation Site Template and 1 more
Count Up
Animating a number from zero to its value, usually once when it scrolls into view. The number is a proxy tween rendered with tabular figures so the layout does not jitter as the digits change.
In the vault Admin DashboardAerospace CompanyAI Agent Dashboard and 37 more
Countdown
A clock counting down to a moment, with each digit change animated rather than swapped. Built on a GSAP ticker so the display stays accurate when a tab sleeps and wakes.
In the vault Aerospace CompanyComing Soon TemplateFitness App and 2 more
Crossfade
Blending one image or block into the next by animating opacity on both at once. Used inside a frame where a wipe would be too abrupt, such as a background swap behind a running headline.
In the vault 3D Product Showcase TemplateArchitecture Firm TemplateBoutique Hotel Template and 13 more
Cursor Effects
A custom cursor or something attached to it: a ring that grows over links, a label that follows, a blend-mode dot. Hidden on touch devices, where there is no pointer to follow.
In the vault Cursor Trail EffectExhibition Artwork LensHover Image Trail and 4 more
Curved Path
Items laid out along an arc or a wave instead of a straight row, each one positioned and rotated by its distance along the curve. Scroll or drag moves the whole set along the path, so the middle item rises as the edges fall away.
In the vault Arc Offset GallerySerpentine Text ScrollSquiggle Product Gallery

D

Data Viz
Charts, meters and gauges drawn with SVG or canvas and animated from the data: bars grow, arcs draw, values count. GSAP tweens the numbers; the drawing code renders whatever the numbers say.
In the vault Admin DashboardAnalytics DashboardMonitoring Dashboard and 1 more
Dialog Animation
The open and close of a modal, sheet or popover: backdrop, panel and content each on their own tween, in a timeline that reverses on close. Focus moves in on open and back out on close.
In the vault Architecture Firm TemplateBranding Agency TemplateCobweb Tear and 21 more
Drag
Moving an element with the pointer using GSAP Draggable, with bounds, snapping and an inertia throw. Draggable handles mouse, touch and pen with one API and reports velocity for the throw.
In the vault Architecture Firm TemplateAppointment Booking TemplateBoutique Hotel Template and 28 more
Drag Interaction
A drag that does something beyond moving the element: reordering a list, revealing a comparison, scrubbing a timeline, picking a value. The drag is the input; the effect is what it drives.
In the vault Changelog Catch-upCharity Campaign TemplateDeveloper Tool and 6 more
Draggable
Elements moved by the pointer with GSAP Draggable: bounds, snap points, inertia throws, and the same code for mouse, touch and pen.
In the vault 3D Ring GalleryCreative Agency TemplateAI Agent Dashboard and 49 more

E

Easing
The curve that shapes an animation's speed over its duration. "none" is constant; power2.out starts fast and settles; expo.inOut idles at both ends. GSAP ships thirty-odd and CustomEase draws the rest.
Elastic
Overshooting motion that settles like a spring: elastic.out for a bounce past the target, or a physics simulation for things that respond to the pointer. Tuned so the wobble finishes before the reader notices it.
In the vault Bottom Navigation BarDeveloper Portfolio TemplateElastic Photo Mesh and 8 more

F

Filter
Animating CSS filters (blur, brightness, contrast, hue-rotate) or SVG filter primitives. Filters repaint the element every frame, so the Vault keeps them to hover moments and short transitions.
In the vault 3D Product Showcase TemplateAdmin DashboardCreative Agency Template and 42 more
Fisheye
Scale that depends on distance from a focal point, usually the viewport centre: the nearest items grow and the rest shrink smoothly. Recomputed on every frame of a drag or scroll with a mapped distance, so the emphasis follows the motion.
In the vault Creative Studio PortfolioFunhouse PortraitInfinite Draggable Gallery and 1 more
Flip Filter
Filtering or sorting a grid and animating each card from where it was to where it lands, with GSAP Flip. The cards that leave shrink out, the ones that stay slide, the ones arriving grow in.
In the vault Clothing Brand TemplateFilter ChipsJewellery Template and 1 more
Flip Layout
The FLIP technique (First, Last, Invert, Play), in GSAP's Flip plugin: record positions, change the layout, then animate each element from its old place to its new one. Layout changes that look like motion.
In the vault Activity Feed TimelineAdmin DashboardAI Agent Dashboard and 48 more
Focus Management
Moving keyboard focus deliberately as the interface changes: into a dialog when it opens, back to the trigger when it closes, along a menu with the arrow keys. What makes an animated component usable without a pointer.
In the vault 3D Product Showcase TemplateAerospace CompanyAI Chat Interface and 47 more
force3D
A GSAP transform setting that writes a 3D matrix even for flat motion, nudging the element onto its own GPU layer. The default "auto" promotes only while a tween runs and reverts afterwards, so no orphaned layers are left behind.
Form Animation
Motion in inputs and forms: labels that float, borders that draw, steps that slide, submit buttons that change state. Each tween answers something the user did.
In the vault Branding Agency TemplateCocktail Bar TemplateDual Range Slider and 19 more
Form Validation
Showing a field's validity with motion as well as a message: a shake on error, a tick drawing in on success, a message that unfolds under the field. The message is still real text for assistive technology.
In the vault Bookshop TemplateCharity Campaign TemplateCybersecurity Company and 18 more
Fuzzy Search
Matching a query against a list loosely enough that typos and partial words still find things, then animating the results as they change. The match scoring is plain JavaScript; GSAP moves the rows.
In the vault Autocomplete Search DropdownCmd+K Command PaletteSpotlight Search Modal

G

Gradient
Gradients that move: angles rotating, colour stops shifting, a mesh of soft blobs drifting. Animated through CSS custom properties, which GSAP can tween directly.
In the vault Aurora Gradient FieldCanvas Shape Vortex
Grid Animation
A grid of cells animating as a field: a stagger that ripples from one corner, cells that react to the pointer, tiles that flip in sequence. The grid: option on stagger does most of the work.
In the vault Cybersecurity CompanyGrid ShockwaveStagger Grid Reveal
GSAP
GreenSock Animation Platform. A JavaScript animation library that tweens any numeric property (CSS, SVG attributes, plain object values, canvas state) with one API, consistent timing and a plugin system for scroll, drag, text and SVG work. Since version 3.13 every plugin is free.
gsap.context()
A scope for a group of animations and ScrollTriggers, tied to a container element. ctx.revert() kills everything made inside it and restores inline styles, which is how a framework component cleans up on unmount.

H

Horizontal Scroll
A row of panels that moves sideways while the page scrolls vertically, with the section pinned for the distance. A scrubbed xPercent tween on the track, and never an element with its own horizontal scrollbar.
In the vault Art Gallery TemplateChrono Rail TimelineDeveloper Portfolio Template and 7 more
Hover Effect
A change on pointer hover with a tween in both directions: a tilt, an underline drawing in, a colour sweep, an image swap. Given a keyboard equivalent on focus and disabled on touch.
In the vault 3D Card Flip GalleryAdmin DashboardAnalytics Dashboard and 58 more

I

Image Sequence
Playing a folder of frames like a film, one image per scroll step, drawn to a canvas. The frame index is a scrubbed proxy tween, and the images are preloaded before the section arrives.
In the vault Creative Agency TemplateCut-out Breakout ZoomPhoto Reel Zoom and 2 more
Image Trail
Images that appear along the pointer's path and fall away behind it. Each one is placed at the pointer, given a short life with a tween, and reused from a pool rather than created fresh.
In the vault Hover Image Trail
Infinite Loop
Content that scrolls or cycles without a visible seam. The content is duplicated once and the position wraps with a modifier, so the loop never reaches an end to jump back from.
In the vault Arc Offset GalleryArchitecture Firm TemplateCanvas Shape Vortex and 16 more

K

Keyboard Navigation
Every interaction reachable from the keyboard: arrow keys through a menu or slider, Escape to close, Enter to select, Tab in a sensible order. The animations follow the key the same way they follow a click.
In the vault 3D Product Showcase TemplateCollapsible Sidebar MenuActivity Feed Timeline and 165 more

L

Labels
Named positions on a timeline. Tweens can be inserted at a label and playback can seek to one, which keeps a long sequence readable and lets a scrubbed timeline snap to its chapters.
Lerp
Linear interpolation: move a fraction of the way from the current value to the target every frame. The mechanism behind smooth scrolling, trailing cursors and any "catch-up" motion.
Lightbox
Opening an image or video to fill the screen, animated from the thumbnail it came from with Flip, and closing back to it. The rest of the page dims and scrolling is held while it is open.
In the vault 3D Ring Gallery35mm Film Strip GalleryFLIP Layout Morph and 3 more
Load Sequence
The choreography of a page's first seconds: a loader, a curtain, a counter, then the content arriving in order. Built as one timeline so the parts cannot drift out of step.
In the vault 3D Product Showcase TemplateAerospace CompanyCurved Lift Transition and 20 more

M

Magnetic
An element that leans toward the pointer as it approaches, and springs back when it leaves. Distance-weighted so the pull is gentle at the edge and firm near the centre, and off entirely on touch.
In the vault Link Hub TemplateAnimated Pill NavbarPricing Slider
Marquee
A strip of text or logos moving continuously along one axis, looping seamlessly. Often sped up or reversed by scroll velocity, and paused when the reader hovers or asks for reduced motion.
In the vault Brewery TemplateFood Truck TemplateInfinite Marquee with Mouse Control and 1 more
Mask Reveal
Content uncovered by a moving mask: a block that slides off, a shape that opens, a gradient that sweeps through. Like clip-path, a wipe rather than a fade, but with soft edges and shapes clip-path cannot draw.
In the vault Arch Window RevealBlueprint to Product ScrollConstruction Company and 24 more
matchMedia
gsap.matchMedia() runs a setup function only while a media query matches, and reverts everything it made when the query stops matching. Breakpoints and prefers-reduced-motion in one mechanism.
Micro Interaction
A small animation that answers a single action: a button pressing, a toggle sliding, a checkbox ticking, a count popping. Short enough to feel like the control itself, not an animation on top of it.
In the vault Collapsible Sidebar MenuAI Chat InterfaceAnnouncement Bar and 66 more
ModifiersPlugin
A GSAP plugin that intercepts each animated value before it is applied, so it can be wrapped, snapped or rounded. Seamless marquees are the usual customer: x wraps back to zero without a visible jump.
Momentum
Motion that carries on after the input stops and slows naturally: a flicked slider, a thrown card, a scroll that coasts. GSAP's InertiaPlugin turns release velocity into a tween that lands on a snap point.
In the vault 3D Ring GalleryArc Offset GalleryArchitecture Firm Template and 33 more
Morphing
One shape becoming another by animating its path or outline. SVG paths with MorphSVG, clip-path polygons with matching point counts, or text outlines traced with a font library.
In the vault Bottom Navigation BarCmd+K Command PaletteCopy to Clipboard Button and 13 more
Motion Path
Moving an element along a curve rather than a straight line, with GSAP's MotionPathPlugin. The path is an SVG path or an array of points, and the element can turn to face its direction of travel.
In the vault Food Truck TemplateScroll Path Journey
Mouse Follow
Something that trails the pointer: a custom cursor, a spotlight, a preview image. Position is written with quickTo() so the follower eases toward the pointer instead of snapping to it.
In the vault ASCII FocusAurora Gradient FieldBranding Agency Template and 8 more

O

Odometer Counter
A number whose digits roll like a mechanical counter, each column sliding to its new value. Each digit is a strip of 0 to 9 translated with GSAP, and the columns stagger so a large change reads as a spin.
In the vault Aerospace CompanyMonthly/Annual Pricing ToggleNotification Bell Dropdown and 4 more
Organic Motion
Motion with no straight lines or fixed rhythm: drift, wobble, breathing scale, noise-driven paths. Usually a few slow tweens with yoyo and random durations, so no two elements ever line up.
In the vault Ambient Orb FieldAurora Gradient FieldSilk Background

P

Page Transition
Animating between pages or views rather than cutting: a curtain that closes and opens, content that slides out and in. Built so the next page is ready before the curtain lifts.
In the vault AI Studio SaaS TemplateCard to Hero Page TransitionConstruction Company and 24 more
Parallax
Layers moving at different rates as the page scrolls, so the slower background reads as farther away. Usually a scrubbed yPercent per layer.
Particle Pooling
Reusing a fixed set of particle elements or objects instead of creating and destroying them. A particle that dies goes back to the pool and is reset for the next spawn, which keeps memory flat during a long burst.
In the vault Canvas Particle FlowCursor Confetti TrailAnimated Like Button
Particle System
Many small independent things moving under simple rules: confetti, sparks, dust, stars. Drawn to a canvas or a WebGL buffer, advanced on GSAP's ticker, and pooled so the count never grows.
In the vault Canvas Shape VortexParticle Morph TextSand Reveal and 2 more
Physics
Motion with mass, gravity, friction or springs rather than an easing curve. Either GSAP's physics plugins or a small simulation stepped on the ticker, with the result written to transforms.
In the vault 3D Physics BackgroundCloth DrapeCobweb Tear and 11 more
Pinning
Holding an element fixed in the viewport while the page scrolls a set distance past it, usually so something can animate while the reader stays looking at one place. pin: true in ScrollTrigger.
Pointer Effects
Anything driven by where the pointer is or how fast it moves: a tilt, a spotlight, a repel, a trail. Written from a single pointermove listener through quickTo(), and given a sensible resting state on touch.
In the vault 3D Physics BackgroundAmbient Orb FieldAurora Gradient Field and 26 more
Pointer Tracking
Reading the pointer's position relative to an element and turning it into a value: a tilt angle, a gradient centre, a parallax offset. Normalised to -1..1 so the same effect works at any size.
In the vault Aerospace CompanyArchitecture Firm TemplateCybersecurity Company and 17 more
Progress Bar
A bar or ring showing how far along something is: the page, a step sequence, a timer. Scroll progress is a scrubbed scaleX; step progress is a tween per step.
In the vault Announcement BarCharity Campaign TemplateSegmented Control and 4 more
Progressive Enhancement
Building the effect so the content is complete and usable before the script runs, and richer after. No-JS readers, reduced-motion readers and search crawlers all get a finished page.
In the vault 3D Product Showcase TemplateAdmin DashboardCreative Agency Template and 111 more
Proxy tween
Tweening a plain object, not an element, and rendering from its value in onUpdate. How GSAP drives things it cannot touch directly: canvas, a character count, a shader uniform, a CSS custom property.

Q

QuickTo
gsap.quickTo(): one reusable tween per property, retargeted on every event instead of creating a new tween each time. The difference between a pointer-follow that is smooth and one that stutters.
In the vault Aurora Gradient FieldJewellery TemplatemacOS Dock Navigation and 6 more
quickTo()
A function that reuses one tween to retarget a property as often as you like. The right tool for pointer-following, where a fresh tween every mousemove is the classic performance mistake.

R

Reorder
Dragging items into a new order and animating the others out of the way as you go. Draggable for the input, Flip for the shuffle, and the final order written back to the DOM.
In the vault Drag and Drop Sortable ListmacOS Dock NavigationFlorist and 3 more
requestAnimationFrame
The browser API that runs a callback before the next repaint, at the display's refresh rate. GSAP's ticker sits on it, and effects with their own render loop should share that ticker rather than start a second one.

S

Scroll Hijack
Taking over the wheel or touch input for a section so each gesture advances one step rather than scrolling freely. Used sparingly, with GSAP Observer, and always with a way to skip past.
In the vault Curved Ribbon SliderScroll Hijack Sections
Scroll Progress
A value from 0 to 1 for how far through a section or the page the reader is, driven by ScrollTrigger and rendered as a bar, a ring, a counter or a colour.
In the vault Parallax HeroPoster Grid TemplateScroll Progress Indicator and 1 more
Scroll Reveal
Elements that appear as they enter the viewport: a wipe, a rise, a draw. Triggered once with ScrollTrigger, with the start state set before first paint so nothing flashes visible and then hides.
In the vault 3D Card Flip Gallery3D Product Showcase TemplateAdmin Dashboard and 92 more
Scroll Stack
Cards that pin and stack as you scroll, each new one sliding over the last and the earlier ones scaling back slightly. A pinned section with one ScrollTrigger per card.
In the vault Scroll Stack Cards
Scroll Storytelling
A long section where scrolling advances a narrative: text steps beside a pinned figure that changes with each one. Each step is a ScrollTrigger and the figure's states are a timeline.
In the vault Arch Window RevealCut-out Breakout ZoomDeconstructed Launch Page and 21 more
Scrollspy
Marking which section is currently in view in a table of contents, as the reader scrolls. An IntersectionObserver on the headings and a marker that slides between the links.
In the vault Branding Agency TemplateDeveloper Portfolio TemplateDeveloper Tool and 6 more
ScrollTrigger
The GSAP plugin that ties animation to scroll position. It can play a tween once when an element enters the viewport, scrub its progress with the scrollbar, pin an element in place for a distance, and snap between states.
Scrub
Progress tied to the scrollbar: the animation only moves when the page does, forwards and backwards. scrub: true follows exactly, a number adds smoothing, and snap can settle it on chapters.
In the vault 3D Product Showcase TemplateCreative Agency TemplateArch Window Reveal and 81 more
Scrubbing
Linking an animation's progress directly to scroll position, so scrolling down plays it forward and scrolling up reverses it. scrub: true follows the scrollbar exactly; scrub: 1 lets it catch up over a second.
Shared Element
An element that appears to travel from one view to the next: a thumbnail growing into a hero, a card opening into a detail panel. Flip records the start, the DOM changes, and the element animates between the two.
In the vault Branding Agency TemplateCard to Hero Page TransitionDeveloper Portfolio Template and 6 more
Smooth Scroll
Replacing the browser's instant scroll with an eased one. This site uses Lenis, synced to GSAP's ticker so ScrollTrigger and the scroll position never disagree.
In the vault Boutique Hotel TemplateHoliday Let TemplateScrollspy Table of Contents
Snap
Settling a scrubbed or dragged value on the nearest of a set of points: the next slide, the nearest section, a whole step. ScrollTrigger and Draggable both take a snap option.
In the vault 3D Ring GalleryArc Offset GalleryBottom Navigation Bar and 20 more
Split Flap
The airport departures board: each character flips through the alphabet to its target with a mechanical tick. Every cell is a two-half card rotated with GSAP, and the columns stagger.
In the vault Split-Flap Board
SplitText
The GSAP plugin that breaks a block of text into characters, words or lines, each wrapped in its own element, so type can be animated piece by piece and put back together afterwards.
Spotlight
A circle of light that follows the pointer across a dark surface, revealing what is under it. A radial gradient or mask whose centre is written with quickTo().
In the vault Link Hub TemplateProduct Onboarding TourSpotlight Background
Spring Physics
Motion that overshoots and settles like a real spring: stiffness, damping and mass rather than a duration. Tuned so a drag release feels weighted and a hover feels light.
In the vault Before / After CompareBottom Navigation BarDeconstructed Launch Page and 15 more
Stagger
An offset between the start times of the same tween on many elements, so a list cascades rather than moving as one. A number, or an object with from, grid, amount and ease for shaped waves.
State Transition
Animating between named states of a component rather than just from hidden to shown: idle to loading to success, collapsed to expanded, tab A to tab B. Each transition is a timeline that can be interrupted.
In the vault AI Chat InterfaceAnnouncement BarChangelog Catch-up and 29 more
Sticky Scroll Story
A figure that stays pinned while a column of text scrolls past it, changing at each step. The scroll narrative pattern from long-form journalism, built on ScrollTrigger pinning.
In the vault Editorial ScrollytellingEditorial Story SpreadProcess Path and 1 more
Svg Animation
Animating the attributes of SVG elements directly: points, radii, transforms, fills. GSAP treats an SVG attribute like any other property, so a chart or a logo animates without a separate library.
In the vault Animated Background BeamsCoffee Shop TemplateBrewery Template and 17 more
Svg Draw
Making a stroke appear as if drawn by hand, with GSAP's DrawSVGPlugin animating the visible portion of a path. Underlines, icons, signatures, diagrams.
In the vault Fitness App
Svg Filters
Distortion, blur, turbulence and displacement built from SVG filter primitives and animated by tweening their attributes. Liquid, glitch and heat-haze effects live here.
In the vault Magnetic Glass LensBeauty Salon Template
Svg Line Draw
A line or outline drawing itself from one end to the other. The path's dash offset is tweened from its length to zero, either with DrawSVG or by hand.
In the vault Activity Feed TimelineBlueprint to Product ScrollCybersecurity Company and 10 more
Svg Stroke
Animating a stroke's width, dash pattern, colour or offset. The mechanism behind drawn lines, dotted progress rings and outlines that thicken on hover.
In the vault Copy to Clipboard ButtonLoading Submit ButtonScroll Progress Indicator and 1 more

T

Tabs
A row of options with one active panel, and a marker that slides to the chosen tab rather than jumping. Panels wipe or slide in the direction of travel, and the arrow keys move between tabs.
In the vault Admin DashboardAnalytics DashboardCocktail Bar Template and 22 more
Text Animation
Type that moves: split into characters, words or lines and revealed, scrambled, typed, highlighted or scrolled. SplitText does the splitting; the effect decides the motion.
In the vault Editorial One Page TemplateElastic Repel HeadlineFolded Type Scroll and 36 more
Theme Switch
Switching between light and dark (or between palettes) with the change animated: a wipe across the page, a sun becoming a moon, colours tweening through custom properties.
In the vault Admin DashboardAI Agent DashboardAnalytics Dashboard and 11 more
Timed Stream
Items arriving on a schedule as if from a live feed: notifications, log lines, messages. A timeline or ticker spawns each one, it enters with a tween, and old ones are removed to keep the DOM small.
In the vault Activity Feed TimelineAI Chat InterfaceAnnouncement Bar and 3 more
Timeline
A container that sequences tweens on one clock. Tweens are added with positions or labels, and the whole thing plays, pauses, reverses, scrubs and repeats as a single unit.
Timeline Control
Exposing a timeline's controls to the reader: play, pause, scrub, speed, seek to a label. The interface for explaining an animation, and for any effect with a replay button.
In the vault Collapsible Sidebar MenuCoffee Shop TemplateConstruction Company and 7 more
Token Theming
The effect's colours, spacing and timing kept as CSS custom properties on one element, so it can be restyled without touching the script. What makes a UI kit fit an existing design system.
In the vault Aurora Gradient FieldEnvelope Advent CalendarFitness App and 3 more
Touch Drag
A drag that works properly on a phone: pointer events rather than mouse events, touch-action set so the page does not scroll underneath, and a gesture that reads as a tap when the finger barely moved.
In the vault AI Studio SaaS TemplateBookshop TemplateBottom Navigation Bar and 29 more
Touch Gestures
Swipe, pinch and long-press as inputs, recognised from pointer events and turned into animation. GSAP Observer does the recognition; the effect decides what a swipe means.
In the vault Creative Agency TemplateBefore / After CompareElastic Photo Mesh and 11 more
Touch Interaction
Designing the effect for a finger rather than a pointer: no hover states, larger targets, and a resting state that still makes sense when nothing is being touched.
In the vault Canvas Particle FlowInteractive Dot Grid BackgroundRight-Click Context Menu
Transforms
translate, rotate, scale and skew. The properties a browser can animate on the compositor without relayout or repaint, which is why almost every smooth effect is built on them.
Tween
One animation that moves one or more properties from a start value to an end value over a duration. The word is short for "in-betweening". Made with gsap.to(), gsap.from() or gsap.fromTo().
Typesetting
Type treated as the effect: lines that fit their container, words that set at display size, characters that move as pieces. Measured after fonts load, so the fit is right on the first frame.
In the vault Law Firm
Typewriter
Text appearing one character at a time with a caret, sometimes deleting and retyping the next phrase. A snapped proxy tween over the character count, with the full sentence in the markup for readers without motion.
In the vault Typewriter Text

V

Value Transition
Animating a number or a colour rather than a position: a price updating, a percentage settling, a background tinting. A proxy tween formatted on each update.
In the vault Monthly/Annual Pricing ToggleJewellery TemplateFitness App and 3 more
Velocity
Reading how fast the page is scrolling or the pointer is moving, and feeding it into the effect. ScrollTrigger's getVelocity() drives skews, marquee speed and blur; a fast flick and a slow scroll look different.
In the vault Bottom Navigation BarChrono Rail TimelineCursor Confetti Trail and 5 more
Velocity Reactive
An effect whose intensity follows scroll or pointer speed and relaxes when it stops: text that skews in fast scrolls, a marquee that speeds up, an image that stretches. Always eased back to rest with quickTo().
In the vault 3D Ring GalleryArc Offset GalleryBefore / After Compare and 46 more
View Transitions
Moving between screens or routes without a hard cut: the outgoing view animates away, the incoming view animates in, and shared elements carry across. Done with GSAP on the swap rather than the browser's View Transitions API, so the same timing runs everywhere.
In the vault 3D Product Showcase TemplateCreative Agency TemplateAerospace Company and 36 more
Viewport Aware Ticker
A render loop that only runs while its element is visible. An IntersectionObserver adds and removes the ticker callback, so an ambient effect two screens down costs nothing.
In the vault Cobweb TearInfinite Marquee with Mouse ControlJack-o'-Lantern Light and 3 more

W

Webgl Shader
Drawing with the GPU through three.js: a fragment shader on a plane, with GSAP tweening the uniforms. Distortion, flowmaps, particle fields and anything where every pixel is computed each frame.
In the vault 3D Physics Background3D Product Showcase TemplateAI Research Template and 41 more
will-change
A CSS hint that a property is about to animate, letting the browser prepare a layer in advance. Useful on a handful of elements, harmful on hundreds. GSAP sets force3D for the same purpose while a tween runs.
Wrap
gsap.utils.wrap(): a value that goes past its range comes back in at the other end. The maths under every seamless loop, from a marquee to an infinite carousel.
In the vault Infinite Draggable GalleryInfinite Marquee with Mouse ControlIsometric Scroll Wall and 2 more

Z

Zoom
Scaling into or out of an element, usually with scroll: a photo that grows to fill the screen, a map that pushes in on a place, a title that recedes. Scale on the compositor, so it stays smooth at any size.
In the vault Cut-out Breakout ZoomDolly ZoomEditorial Story Spread and 9 more

See these concepts in action

Browse the effects library to see production implementations of these animation techniques.

Browse effects Getting started