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 GalleryBookshop Template and 34 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 FieldComing Soon Template

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 Before / After CompareCharity Campaign TemplateInterior Design Template and 1 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 Ambient Orb FieldComing Soon TemplateJewellery Template and 1 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 Creative Agency TemplateCanvas Particle FlowCanvas Shape Vortex and 12 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 GalleryCurved Ribbon SliderEditorial Project Carousel and 2 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 Scroll 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 EffectRadial Headline Burst and 1 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 AI Studio SaaS TemplateBottom Navigation BarSegmented 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 Ring GalleryCollapsible Sidebar Menu and 42 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 Before / After CompareBranding Agency TemplateCharity Campaign Template and 16 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 Atlas Workspace Console UI KitCmd+K Command PaletteDocumentation Site Template and 3 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 Creative Agency TemplateArchitecture Firm TemplateAtlas Workspace Console UI Kit and 26 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 Coming Soon TemplateClothing Brand TemplateRep Fitness App UI Kit and 1 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 Boutique Hotel TemplateCustomer Proof LedgerFullscreen Slider Template and 3 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 EffectDeveloper Portfolio TemplateHover Image Trail and 6 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 Atlas Workspace Console UI KitOps Console UI KitRelay App UI Kit 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 Atlas Workspace Console UI KitDate Range PickerDraggable Bottom Sheet and 13 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 Atlas Workspace Console UI KitEditorial Project CarouselFieldset Forms UI Kit and 13 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 Elastic Photo MeshMulti-Page SaaS Template
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 GalleryBefore / After CompareDraggable Dashboard Template and 36 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 BarElastic Photo MeshSegmented Control and 5 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 Creative Agency TemplateAmbient Orb FieldArt Gallery Template and 11 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 Filter ChipsJewellery Template
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 TimelineArt Gallery TemplateAtlas Workspace Console UI Kit and 24 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 AI Chat InterfaceAtlas Workspace Console UI KitCookie Consent Banner and 13 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 Dual Range SliderExit Intent PopupFieldset Forms UI Kit and 12 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 Fieldset Forms UI KitJewellery TemplateAnimated Modal Dialog and 4 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 PaletteDocumentation Site Template and 1 more

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 Grid 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 TimelineCreative Portfolio Template and 6 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 GalleryArchitecture Firm TemplateAutocomplete Search Dropdown and 41 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 TemplateScroll Image SequenceScroll Sequence Hero Transition
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 TrailRestaurant Template
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 GalleryCanvas Shape VortexBrewery Template 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 Collapsible Sidebar MenuActivity Feed TimelineCreative Agency Template and 78 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 GalleryFLIP Layout MorphPhoto Marquee Gallery and 1 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 TemplateComing Soon TemplateInteractive Halftone Image and 5 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 Creative Agency TemplateLink Hub TemplateAnimated Pill Navbar and 2 more
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 Clothing Brand TemplateInfinite Marquee with Mouse ControlProduct Launch Template 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 Creative Agency TemplateBranding Agency TemplateCursor Spotlight Mask and 15 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 63 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 GalleryBranding Agency Template and 22 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 9 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 FieldCanvas Shape Vortex and 7 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 Monthly/Annual Pricing ToggleNotification Bell DropdownQuantity Stepper and 2 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 FieldComing Soon Template

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 Multi-Page SaaS TemplatePage PreloaderReal Estate Template and 2 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 VortexComing Soon TemplateParticle Morph Text 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 Cloth DrapeDeveloper Portfolio TemplateKinetic Shutter Blinds and 7 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 Ambient Orb FieldAurora Gradient FieldCloth Drape and 19 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 AI Studio SaaS TemplateFerrofluid MagnetJewellery Template and 5 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 5 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 Creative Agency TemplateAmbient Orb FieldBranding Agency Template and 13 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 FieldComing Soon TemplateJewellery Template and 5 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 TemplateCreative Agency Template and 78 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 Long-Form Story TemplateScroll 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 Receipt Printer ScrollScroll Image SequenceScroll Path Journey and 2 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 Documentation Site TemplateFintech TemplateLanding Page Template and 3 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 TemplateAI Studio SaaS Template and 51 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 FLIP Layout MorphAnimated Modal DialogAnimated Tooltip
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 TemplateDocumentation Site 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 13 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 Draggable Dashboard TemplateSplit-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 Tour
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 BarSlide to Confirm Button and 11 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 BarAtlas Workspace Console UI Kit and 21 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 AI Studio SaaS TemplateEditorial Scrollytelling
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 Cocktail Bar TemplateFood Truck TemplateFullscreen Slider Template and 8 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 Atlas Workspace Console UI KitLong-Form Story TemplateOps Console UI Kit and 5 more
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 Liquid Morph Hover EffectLiquid Ripple ImageMagnetic Glass Lens and 1 more
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 TimelineArchitecture Firm TemplateCharity Campaign Template 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 Atlas Workspace Console UI KitDocumentation Site TemplateMusic Festival Template and 9 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 Creative Agency TemplateAppointment Booking TemplateCoffee Shop Template and 41 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 Atlas Workspace Console UI KitFieldset Forms UI KitMulti-Page SaaS Template and 5 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 MenuAppointment Booking TemplateCocktail Bar Template and 5 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 Atlas Workspace Console UI KitAurora Gradient FieldBrewery Template and 8 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 TemplateBottom Navigation BarBranding Agency Template and 11 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 Before / After CompareElastic Photo MeshFlorist and 8 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 FlowRight-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 Branding Agency TemplateMagazine Template
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 Developer Portfolio TemplateTypewriter TextWedding Template

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 ToggleFinancial Advisor TemplateJewellery Template and 1 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 4 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 29 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 Multi-Page SaaS TemplateRep Fitness App UI KitSimmer Mobile App UI Kit
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 Infinite Marquee with Mouse ControlScroll Timeline ChronicleTwang Lanyard

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 Product Showcase TemplateAI Research TemplateASCII Focus and 21 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 1 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 Photo Gallery TemplatePhotography Portfolio TemplateScroll Zoom Portal

See these concepts in action

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

Browse effects Getting started

Your cart

Your cart is empty

The Vault £99

The Vault library, plus future additions to the library.

Or browse effects, templates or UI elements.