GSAP & WebGL animation components with AI prompts

Every component in this library ships with a live demo and a validated AI prompt: paste it into Claude Code, Cursor or any AI coding agent and it rebuilds the animation in your project, ready to adapt to your own design. New components are added regularly — 219 are in the gallery today.

Open the interactive gallery ↗

scroll (61)

Adaline Scroll Animation — A pinned hero where a 207-frame image sequence is played back frame-by-frame on a <canvas> driven by scroll. A single…
Assembly Icon-to-Text Scroll Animation — A pinned hero for the 'Assembly' creative workspace, driven by a single scrubbed ScrollTrigger (smoothed with Lenis).…
Barrett & Hale Scroll Animation — A fixed center title bar ('Barrett & Hale') with mix-blend-mode difference sits over a scrolling client index. As each…
Capsules Animated Sticky Columns — A pinned full-screen section where four rounded 'capsule' columns swap in place as you scroll. A single ScrollTrigger…
Clayboan Scroll Animation — Full-page scroll gallery with Lenis smooth scroll where each work section is scrubbed by GSAP ScrollTrigger: the…
CriticalDanger Scroll Cards — A scroll-pinned section (5 viewport heights, Lenis-synced) where a giant heading translates horizontally as you scroll…
Eduardbodak Animated Cards — A scroll-driven card sequence with Lenis smooth scroll where GSAP ScrollTrigger scrubs three stacked hero cards apart…
Epic Scroll Animations — A long scroll story where two sections (a pinned 'revealer' shape and the header-info block) are pinned with…
Explode Text On Scroll (Matter.js) — A pinned sticky paragraph whose highlighted keywords progressively recolor as you scroll, then shatter into individual…
FameEstate Scroll Animation — Pinned hero scrubbed over seven viewport heights with Lenis smooth scroll: a red panel opens from a thin clip-path slit…
Fiddle Digital Scroll Animation — A grid of editorial portraits scattered across a multi-column layout where each row's images scale up from 0 to full…
FollowArt Scroll Animation — Stacked full-screen sections that swing in from a 30-degree tilt as you scroll, each panel scrubbing back to level…
Gregory Lalle Awwwards Rebuild — A scroll-driven vertical portfolio gallery where a fixed project index number reveals and pushes up via masked GSAP…
GTA VI Landing Page Scroll — A GTA-VI-style pinned hero reveal driven by scroll, art-directed as 'Casa Vicente', a Lisbon tailoring house AW26…
Halide — Masked Portrait Reveal Scroll — A pinned spotlight section where a tall grid of desaturated images scrolls vertically while an SVG-masked banner image…
HeureBleue Scroll Animation — A scroll-driven zoom-through gallery: a fixed grid of five image columns sits behind the page and, as a tall spacer…
Image Explosion with JS Physics — As the footer scrolls into view, 15 images burst upward from the bottom edge and rain back down with a hand-rolled…
Image Reveal On Scroll — A staggered grid of tall portrait images that each unmask as they enter the viewport: GSAP animates a clip-path polygon…
Infinite Horizontal Scroll — A seamless looping horizontal scroll gallery driven by raw wheel and touch input. Vertical wheel/touch deltas are…
Infinite Parallax Scroll with Minimap — Infinite vertical scroll through fullscreen project images with a synchronized centered minimap that mirrors the scroll…
Infinite Scroll with Parallax — An endlessly looping vertical project list where wheel and touch scrolling drive a lerp-smoothed translateY on recycled…
Ingamana Scroll Animation — A 10-row project grid whose rows expand from 125% to 500% width (250% to 750% on mobile) based on each row's individual…
Inversa Scroll Animation — Hero pinned over four viewport heights where a single scrubbed onUpdate drives phase-based animations from scroll…
IronHill Scroll Animation — Scroll-scrubbed WebGL dissolve over a tall 175svh hero: a Three.js fullscreen quad with an fbm-noise shader sweeps a…
KVS Studio Scroll-Powered Image Reveal — Pinned full-viewport stack of five images scrubbed over four viewport heights: each image's clip-path wipes upward to…
Larevoltosa Scroll Animation — Pinned spotlight section scrubbed over three viewport heights with Lenis smooth scroll: a giant inline doodle character…
Lenis Smooth Scroll + ScrollTrigger — A services list where each row's thumbnail expands from 30% to 100% width while the row itself grows in height as it…
Lottie Scroll Animation — A full-screen Lottie animation is scrubbed frame-by-frame by scroll position. A GSAP ScrollTrigger with scrub tweens a…
Mask Reveal On Scroll — As each image row enters the viewport, a 3x3 grid of clip-path masks unveils the picture piece by piece: GSAP injects…
Mat Voyce Scroll Animation — A pinned scroll section (scrub over 5x viewport height, Lenis-smoothed) drives a horizontal reel of four huge italic…
Méridien Arc Card Scroll — A pinned full-screen section where five image cards are laid out along a circular arc and rotate through the viewport…
NakedCity Films Navbar Scroll Animation — A fixed, centered 16:9 navbar window (cream panel with nav links over a full-viewport fixed image) expands from 50%…
Nordquantique Scroll — A scroll-driven pixelated block transition between full-bleed sections. Each image section is 200vh tall and overlaid…
Nvg8 Scroll Animation — Intro section pinned for eight viewport heights and scrubbed with Lenis smooth scroll: nine thick rounded SVG strokes…
Orchestra 3D Scroll Animation — A pinned hero where six image-mapped CSS 3D cubes fly in from deep translateZ(-30000px) and assemble into a spread as…
OrkenWorld Scroll Animation — A pinned section where scrolling drags a horizontal row of product cards across the viewport while a full-screen canvas…
Phive Sticky Cards — A vertical stack of full-height sticky cards that fold away on scroll: each card is pinned (pinSpacing false) while…
PrototypeStudio Scroll Animation — Pinned spotlight section scrubbed over five viewport heights with Lenis smooth scroll: a 01/10 counter travels down the…
RADGA Horizontal Scroll Animation — A pinned section turns vertical scroll into a horizontal slide-strip: one ScrollTrigger (pin + scrub over 6x viewport…
Rotating Hand Animation — A single ScrollTrigger pins the section over eight viewport heights and scrubs a clock-like rod that spins 1800deg via…
Sage East 3D Scroll — A fixed 3D perspective slider where ten alternating slides sit at staggered translateZ depths and fly toward the viewer…
Scroll Image Reveal Sequence — A long vertical scroll photo essay ('Close Range — Essay No. 04: Skin') where seven big centered chapter-headers…
Scroll-Powered SVG Stroke Draw — A thick serpentine orange SVG stroke draws itself behind the page content as you scroll, using the classic…
Scroll-Powered SVG Stroke Drawing — A tall inline SVG path with a thick orange rounded stroke sits behind a column of content rows; using the…
ScrollTrigger 404 Horizontal Scroll + Parallax — A 404 page where a pinned full-width headline section is driven by ScrollTrigger scrub: as you scroll, the .wrapper-404…
SeventeenAgency Scroll Animation — Infinite-scrolling contact page (Lenis infinite mode) where the contact-info section is cloned 10x into a seamless…
Smooth Scroll Parallax Images — Musician landing page where every image inside an overflow-hidden container drifts on scroll: a Lenis smooth-scroll…
SofiHealth Product Scroll Animation — A pinned, scrub-driven scroll section where a Three.js GLTF shaker model spins on its Y-axis while a single…
Sticky Cards ScrollTrigger — A stack of full-screen sections is pinned one after another with ScrollTrigger (pin, pinSpacing:false, scrub) so each…
Sticky Image Minimap — A tall scrolling column of full-size images paired with a sticky vertical minimap of thumbnails; a GSAP ScrollTrigger…
Telescope Image Scroll Animation — A pinned banner scrubbed over four viewport heights with Lenis smooth scroll: the image container scales up from zero…
Telescope Scroll Animation — 'Afterimage', a pinned spotlight gallery of long-exposure photographs in colored light. Scrolling first splits the…
TheFirstTheLast Scroll Animation — A pinned section where six rotated product cards stack up one after another from the bottom of the viewport as you…
Voltlites Pinned Hero Zoom-Out Reveal — Hero pinned for four viewport heights where a 3x3 spotlight image grid (300% of the viewport) scales from 1 to 0.5…
VoyeurVerite Scroll Animation — Pinned hero scrubbed over five viewport heights with four manual phases: the foreground image clips into a central…
Vucko Scroll Animation — A tiny centered video preview grows from a 0.25 thumbnail to full scale as the intro section scrolls into view, driven…
Waabi Scroll Animation — Hero pinned for 3.5 viewport heights with Lenis smooth scroll and a scrubbed ScrollTrigger whose progress is mapped…
WeroWallet Spotlight Stroke Draw — Pinned spotlight section where 13 thick diagonal SVG strokes draw in with a staggered stroke-dashoffset scrub until…
Wodniack Work Section Scroll — A pinned scroll section where the word WORK, built from HTML letter divs, streams along four Three.js CatmullRom curves…
WorkingStiff Animated Teams Section — Scroll-driven team section with Lenis smooth scroll and two manual scrubbed ScrollTriggers: as the section enters the…
Zentry Scroll Animations — A long scroll story where a section is pinned for 4x the viewport height and every stage is scrubbed by scroll. As you…

preloader (23)

AlaDesign Landing Page Reveal — Preloader-to-hero landing page reveal driven by three parallel GSAP timelines with a custom 'hop' ease: a dark overlay…
Camille Mormal Grid Reveal — An on-load intro reveal built from a single GSAP timeline: five vertical columns of images slide in from off-screen…
Kin Landing Page Reveal — On page load a two-panel white revealer wipes open with a custom 'hop' ease, a stack of full-bleed images scales in…
Konpo Landing Page Reveal — Auto-playing landing page intro: three vertical rolling counters tick to 100 while a background wipe scales up and 15…
Kudos Landing Page Reveal — A fullscreen preloader plays automatically on load: a randomized 0-to-100% counter runs while a stack of ten portrait…
Landing Page Reveal With Circular Gallery — On load a numeric preloader counts up to 100, then 30 photo cards rise from below into a centered horizontal strip and,…
LaserBySonyMusic Landing Page Reveal — Preloader-to-hero reveal that plays automatically on page load: a giant counter ticks 0 to 100 while scaling up and a…
Lusion Landing Page Reveal — Full-screen preloader-to-content reveal that plays once on load. Three digit columns spin upward with gsap.to…
Maxmilkin Orbit Text Preloader — Portfolio preloader where eight words ride concentric SVG circular orbits, stretching and sliding around their rings…
Nite Riot Landing Page Reveal — Autoplay landing-page intro: a black overlay reveals a gradient-fill logo and staggered project/location lists, then a…
Norrwood Landing Page Reveal — An on-load hero intro for the Norrwood furniture atelier where a single paused GSAP timeline orchestrates the whole…
O'Shane Howard Landing Page — On load, an animated numeric counter (three stacked digit reels tweened with gsap.to and power2.inOut) counts up to…
Our Revolution Landing Page Reveal — A preloader-to-hero landing reveal driven by a single GSAP timeline: a row of seven tall portrait images rises from…
Outfit Landing Page Reveal — Preloader reveal for a fashion-archive landing page: six stacked centered images with random tilts scale up and un-clip…
P10 Landing Page Reveal — A preloader-driven landing reveal that plays automatically on load: SplitText masked characters slide the studio name…
PermianWorld Landing Page Reveal Animation — Preloader reveal on page load: SplitText masked lines slide the preloader copy and counter up while a randomized…
Responsive Landing Page Reveal — On page load a full-screen preloader plays: a numeric counter races from 0 to 100 while an anime.js easeOutExpo…
SavoirFaire Landing Page Reveal Animation — An automatic on-load preloader that runs a slot-machine style number counter (a masked .count strip and its…
Sci-Fi Preloader Button Hero Reveal — Terminal-styled preloader that auto-plays on load: monospace status lines rise with masked SplitText, a circular SVG…
Steelworks Landing Page Reveal — On-load preloader and hero reveal: a white progress bar scales across a dark overlay that wipes away via clip-path,…
The Quiet Crowd Landing Reveal — On page load a GSAP timeline wipes a clip-path preloader and spins a loader, then reveals the hero: heading characters…
TrueKind Landing Page Reveal — A preloader-to-hero landing reveal driven by a single GSAP timeline with a custom 'hop' ease: a two-digit counter rolls…
Zajno Landing Page Reveal — An on-load intro where a centered number counts up to 100, then triggers the landing-page reveal: the scaled-down hero…

slider (22)

Aristide Benoist Slider — A full-screen horizontal image carousel where clicking a segment in the top progress-bar nav slides the track with…
Camille Mormal Slider — A fullscreen image slider where clicking the left/right half of the screen (or a preview thumbnail) reveals the next…
Cielrose Inspired ThreeJS Slider — A wheel-driven WebGL image slider built with Three.js: scrolling drives a custom shader that vertically wipes between…
DetroitParis Infinite Slider — Infinite draggable image slider with exponential perspective sizing: slides anchored to the bottom edge grow…
ESEAgency Scroll-Powered Carousel — A full-screen project carousel pinned by ScrollTrigger (scrub, Lenis-smoothed) where scroll progress drives slides in…
Exo Ape Infinite Carousel — A full-screen infinite image carousel driven by wheel and touch input: each scroll builds a fresh slide and reveals it…
Full Screen Slider — A fullscreen vertical image slider driven by the mouse wheel: each wheel step reveals or hides a slide by tweening its…
GSAP Clip Carousel — A click-to-advance fullscreen product carousel: each click reveals the next image from a center clip-path box that…
Hero Warp Slider — A full-screen WebGL hero slider where clicking anywhere advances to the next image through an expanding lens-warp…
Infinite Horizontal Parallax Slider — A seamless, infinitely looping horizontal image slider driven by mouse wheel, drag and touch. A custom…
Karim Saab Fashion Carousel — A full-screen fashion carousel where a wheel or touch swipe triggers a GSAP transition: the current slide scales down,…
Karim Saab Work Carousel — A fullscreen one-slide-at-a-time work carousel where each wheel or touch swipe fires a GSAP transition: the outgoing…
Meetings Arc Slider — A click-driven fullscreen slider showing three cards on an arc (prev/active/next); clicking a side card or a list item…
Modular Carousel — A click-driven modular image carousel: each click advances a horizontal strip of slide titles via a 2s gsap.to…
Pure JS Vanilla Image Slider — A horizontal image slider driven by vertical page scroll: scrollY is mapped to a target translateX and eased toward it…
Ripple Displacement Slider — Fullscreen Three.js WebGL slider where a click anywhere fires a radial ripple (custom GLSL shader, GSAP-tweened…
Stories Slideshow — A fullscreen Stories-style slideshow that auto-advances every 4s and can be stepped forward/back by clicking the…
Story World Carousel Slider — A fullscreen click-advanced carousel where each click slides the current image left (x:-500) while the next slide is…
ThreeJS Curved Distortion Slider — An infinite horizontal Three.js image slider built from textured PlaneGeometry meshes whose vertices bend into a radial…
ThreeJS Infinite Slider — Infinite vertical slider built entirely in Three.js (no GSAP): ten textured planes loop endlessly inside a WebGL scene,…
Voku Image Slider — Infinite horizontal image slider with 9 slides arranged along a cosine arc: each rAF frame computes a modular wrap…
Warp Lens Slider — A full-screen WebGL image slider where clicking anywhere expands a circular lens/bubble mask from the center, warping…

gallery (20)

3D Circular Image Gallery — 150 small image tiles are placed around a circle with CSS 3D transforms to form a tilted rotating ring seen in…
ASCII Image Reveal Effect — On page load every photo in a 15-image editorial grid first renders as ASCII art on a canvas: cells pop in one by one…
Circular Image Gallery — On page load a GSAP timeline lays out 15 image tiles into a full circle, each scaling from 0 to 1 and rotating…
Field Day Sound — Filter Gallery — A two-column masonry work archive for an independent audio studio, paired with oversized discipline filters; clicking a…
Halation — Phantom Draggable Infinite Gallery — A Three.js orthographic full-screen plane renders an infinite grid of captioned images via a fragment shader, using…
Halide — Chromatic Aberration Lens Archive — Halide, an editorial photo studio, presents its image archive as a full-screen grid that pans with the cursor while a…
Hypnotic Image Gallery (GSAP Flip) — A 14-image still-life gallery for a set-design studio (Plinth) that morphs between three layouts — Grid, Index, Stack —…
Infinite Draggable Image Gallery — An endless, draggable grid of thumbnails that recycles DOM items as you pan (custom lerp animation loop with…
Inkfish Inspired Horizontal Scroll — A full-screen editorial gallery where a 500vw horizontal track of text and image sections is panned by a draggable…
Inkwell-Inspired Image Gallery — A ring of 25 small cards arranged in a circle that reacts to cursor proximity: nearby cards flip 180deg on rotationY,…
JavaScript Responsive Minimap — A vertical thumbnail minimap (horizontal on mobile) whose framed indicator scrubs through 15 images as you scroll the…
Pan-Canvas Video Gallery — A full-viewport canvas holds an oversized 200vw x 200vh grid of film tiles centered with translate(-50%, -50%); on…
Photo Dump Scroll Scatter — A pinned photo-dump gallery for a photo studio archive: 15 randomly rotated print-style photo cards scattered in a ring…
Products Lightbox Gallery — A large draggable canvas holds a 12x12 grid of sneaker product tiles that the user pans by mouse-dragging, with…
Radial Rotating Text Layout — Sixty uppercase text labels are laid out in a huge ring using gsap.set with cosine/sine positioning and a per-item…
Scroll Wave Image Gallery — Vertical gallery of 12 JS-generated images that drift horizontally in a sine-wave pattern as you scroll: each image has…
Scroll-Synced Image Minimap — A tall vertical image gallery paired with a sticky sidebar minimap of thumbnails. As the user scrolls, a scroll…
Sliding Lightbox Gallery — A click-triggered image lightbox for a ceramics-studio archive: clicking any thumbnail in the 4x4 plate grid slides a…
We Go Again — A three-column documentary-studio film selector where a vertical thumbnail gallery on the right lets you click any item…
Zoomable Image Wall — A full-viewport mosaic wall of 1200 image tiles that reveals on load with a random GSAP grid stagger (scale + opacity,…

3d-webgl (19)

3D CRT Display — A 3D CRT monitor (GLB model) fills a dark broadcast-room hero, its screen driven by a custom shader with scanlines, RGB…
3D Scroll Scanner Experience — A full-page scroll experience where a Three.js GLTF model floats and rotates as you scroll, its X-rotation mapped to…
3D Scroll Tunnel — Infinite 3D image tunnel driven by the mouse wheel: six layers of four images each sit on an ellipse inside a…
3D Tunnel Image Slider Carousel — A full-screen animated monochrome tunnel, rendered as a Three.js fragment-shader plane, sits behind ten framed…
Ashfall 3D Cylinder Gallery — A Three.js WebGL gallery arranges dozens of curved image planes into a tall rotating cylinder that spins continuously.…
Asset ORB — A WebGL sphere built from 100 image planes distributed via a Fibonacci-sphere layout, each plane textured with a random…
Brutalist Sci-fi Corridor — On page load a preloader counter climbs to 100 over a black overlay, then a GSAP timeline fades the overlay, rotates…
Cappen Fluid Simulation — Cappen-style GPU fluid simulation built with Three.js: moving the pointer injects ink and velocity splats into…
Cursor-Driven Material Spotlight — Full-viewport Three.js scene with a GLB sculpture whose PBR material is patched via onBeforeCompile: moving the cursor…
Fractal Glass Parallax Effect — Full-viewport Three.js hero where a custom fragment shader refracts the image through vertical fractal-glass ribbons…
Grid Deformation Effect — A fullscreen hero photograph is rendered as a Three.js texture on a shader plane; moving the pointer injects velocity…
Kaitonote 3D Gallery Showcase — A pinned spotlight section scrubbed over fifteen viewport heights with Lenis smooth scroll: twenty editorial portrait…
Lava Buster Fluid Simulation — A fullscreen Three.js WebGL fluid/particle simulation running multi-pass GLSL shaders in ping-pong float render…
StudioDialect 3D Spiral Image Gallery — Scroll-driven 3D spiral gallery built with Three.js: 75 curved tiles textured with 10 photos wind down a…
Three.js 3D Scroll Experience — A fixed Three.js chair model (GLB) scales in on load, floats with a sine bob, and tilts on its X axis proportionally to…
ThreeJS 3D Slider — A Three.js curved plane displays an endless vertical slideshow of captioned images drawn onto a repeating 2D canvas…
ThreeJS 3D Video Gallery — A Three.js WebGL grid of video-textured planes curved into a parabolic wall, each plane mapped to a looping muted video…
Water Ripple Text Simulation — A full-screen Three.js water-ripple simulation over giant canvas-drawn wordmark text: moving the pointer injects…
WebGL Interactive Gradient — A full-screen animated WebGL gradient built with Three.js and two custom fragment shaders: a fluid-dynamics shader…

menu (16)

Advanced Infinite Scroll — A fullscreen vertical menu of category/title rows that loops endlessly: a requestAnimationFrame loop lerps the scroll…
Art Tech Overlay Navigation — Clicking the burger button plays a paused GSAP timeline that reveals a fullscreen black overlay by animating the…
Audemars Piguet Overlay Menu — Fullscreen overlay menu opened from a hamburger toggle: two background halves pre-rotated 180deg with scale(2) sweep in…
Circular Futuristic Navigation Menu — A fullscreen overlay menu whose links are arranged as radial clip-path segments around a draggable center joystick.…
Draggable Pill Menu — Pill-shaped floating menu drawer that can be dragged anywhere in the viewport with GSAP Draggable (bounds: window); a…
Ember & Rye Fullscreen Menu — A minimal Menu button expands a right-docked panel to a fullscreen overlay of five vertical menu columns (Eat, Grill,…
ExoApe-Inspired Overlay Menu — A fullscreen overlay navigation menu inspired by ExoApe. Clicking the Menu toggle drives a synchronized GSAP timeline:…
Fullscreen Portfolio Menu — A fullscreen overlay navigation that toggles open on clicking the burger button: a GSAP timeline sweeps a clip-path…
Jam Area Overlay Menu — Full-screen overlay menu that wipes open with a clip-path reveal when the Menu toggle is clicked, staggering in…
KPVERSE Sliding Menu with Text-Shuffle Hover — A black rounded side-panel navigation menu that slides in from the left (CSS cubic-bezier transition) when the 'Menu'…
Meristem Overlay Menu — Fullscreen overlay menu toggled by a hamburger button: a paused GSAP timeline scales four stacked green background…
Minimal Push Overlay Menu — A fullscreen overlay menu triggered by clicking the hamburger toggle: a GSAP timeline with a custom 'hop' ease pushes…
Poppr Gooey Overlay Menu — Fullscreen overlay menu with a gooey liquid-curtain reveal: clicking the Menu/Close toggle morphs an SVG path's d…
Rejoice Fullscreen Overlay Menu — A fullscreen overlay navigation menu that opens on clicking the 'Menu' button and closes on 'Close'. A single paused…
Responsive Fullscreen Menu — A fullscreen overlay menu that opens on clicking 'Menu': the panel sweeps up via an animated clip-path polygon on a…
Sidebar Slide-Out Menu — Clicking the bottom-right 'Get the Overlay' toggle slides a column of three cards in from the right edge (right: -110%…

GSAP & WebGL animation components with AI prompts

scroll (61)

preloader (23)

slider (22)

gallery (20)

3d-webgl (19)

menu (16)

interactive (15)

hover (15)

transition (11)

cards (7)

text (6)

footer (4)