320+ GSAP.js Examples

An advanced interactive download button featuring a complex 3D truck delivery animation. Powered by GSAP and SCSS, clicking the button triggers a 90-degree backward flip using CSS preserve-3d to convert the top edge into a flat road. A styled vector truck drives in from the left, catches a falling cargo box, departs off-screen, and flips back to reveal a success checkmark. (Requires: gsap.js)

An advanced interactive download button featuring an elastic SVG morphing animation. Powered by the GSAP MorphSVGPlugin and SCSS, clicking the button initiates a synchronized keyframe sequence: the arrow vector launches downward, dynamically compressing and bending the bottom platform line before rotating, merging, and unfolding into a green success checkmark. (Requires: gsap.js, MorphSVGPlugin.js)

This creative download button relies on an elastic, tensioned liquid-string animation to drive its progress micro-interactions. Utilizing a custom JavaScript Proxy wrapper alongside SCSS and GSAP, the code intercepts spline properties to dynamically re-draw cubic-bezier vector coordinates inside the SVG. Triggering the button bows the arrow base down like a rubber band before shooting it off-screen. (Requires: gsap.js)

An interactive sci-fi dashboard demonstrating variable physics and dynamic UI synchronization. Powered by GSAP and Draggable plugins, users can manipulate gravity parameters through either a rotary SVG dial or a vertical linear range slider. Adjusting the inputs scales the bouncing ball simulation’s trajectory height and speed in real-time, while simultaneously morphing variable font weights and HUD color gradients. (Requires: gsap.js, scroll-trigger.js, draggable.js)

An interactive scroll-driven showcase featuring Godzilla walking across a detailed scenic skyline. Scrolling horizontally advances the sprite along an SVG vector path using GSAP MotionPath and ScrollTrigger, adjusting container offsets to dynamically re-center the camera viewpoint. Features vintage film grain dust loops, click-to-destroy targets, and explosive debris particles. (Requires: gsap.js, scrollTrigger.js)

An advanced scroll-driven WebGL experience powered by Three.js and GSAP. A fixed background canvas uses InstancedMesh to render nearly 50,000 distinct 3D cube particles, colored dynamically by extracting color values from an image mapped onto a hidden canvas. As the user scrolls down the page, the camera’s Z-axis position transitions, causing the scattered cubes to seamlessly converge into a photographic portrait. (Requires: three.js, gsap.js)

An advanced visual sandbox showcasing a highly configurable multi-layered image deck. Users can tweak live variables in real time — including 3D perspective depth offsets, pointer tilt multipliers, rotation spreads, chromatic saturation filters, and custom CSS clip-path geometries (hexagon, diamond, circle, rectangle). Features smooth velocity mouse tracking using GSAP quickTo alongside direct CSS Custom Property overrides. (Requires: gsap.js)

An accessible quote rotator featuring fluid GSAP slide-fade transitions and dynamic theme switching. It loads quotes asynchronously from a target JSON file, outputting them into semantic citation structures. Includes native ARIA live-regions (aria-live), responsive height clamps, and keyboard-mapped theme toggles. (Requires: gsap.js)

An advanced full-screen navigation overlay. Toggling the menu scales, translates, and rotates the active page content into a stunning perspective viewport canvas while a polygon clip-path mask slides the overlay into view. Hovering over menu links triggers seamless background image crossfades and zooms, accompanied by staggered split-character text reveals. (Requires: gsap.js)

An advanced infinite loop carousel engineered with GSAP, ScrollTrigger, and Draggable. By binding a proxy playhead to window scrolls and pointer drag deltas, cards move smoothly across a custom scaling path. A specialized timeline looping mathematical function builds overlapping clones, ensuring a zero-gap continuous navigation experience. (Requires: gsap.js, scroll-trigger.js, draggable.js)

Pure CSS Scroll-Driven macOS iOS Dock recreates Apple’s legendary dock using the native CSS Scroll-Driven Animations API. Icons dynamically scale, blur, and shift depth completely without JavaScript. Utilizing @supports (animation-timeline: scroll()), the layout safely handles horizontal and vertical snaps. A zero-dependency, ultra-lightweight demonstrator of modern CSS capabilities. (Requires: gsap.js, scroll-trigger.js)

Circular Reveal Fullscreen Navigation Menu leverages GSAP timelines to orchestrate a fluid canvas expansion by animating a CSS clip-path circle from 0px to 200%. Simultaneous staggered translations are applied to navigation links using a responsive elastic.out easing curve, creating a highly tactile, sequential entry. While the transition remains visually seamless on high-refresh-rate screens, full-screen masking with dynamic clip paths can impose substantial rendering overhead, demanding GPU-accelerated layer promotion via will-change: clip-path to maintain consistent frame rates. (Requires: gsap.js)

This is an Animated SVG Lasso Selection. It simulates a digital cursor drawing marquee selections around hidden text nodes, triggering organic pop-in animations and complex spatial transforms. Its function is to provide a highly stylized, cinematic narrative intro, demonstrating the intersection of vector graphics and timeline-based JavaScript animation. (Requires: gsap.js, tweenmax.js, morphSVG.js, drawSVGplugin.js)

This is a PixiJS Displacement Ripple Zoom. It transforms a static background image into an interactive, liquid-like surface that expands outward from the user’s cursor upon clicking. Its function is to serve as a dramatic, cinematic entrance animation for hero sections or landing pages, shifting visual focus while seamlessly introducing secondary UI elements. (Requires: pixi-js, gsap-js, SplitText.js)

This is an Animated Pokemon Data Dashboard. It interfaces with the PokéAPI to display character statistics using fluid, color-coded progress bars and dynamic badges. Its function is to transform raw JSON data into an engaging, highly visual interface, demonstrating effective state management and asynchronous rendering in React. (Requires: react.js, react-dom.js, gsap.js, axios.js)

This is a full-viewport e-commerce layout featuring a GSAP-powered off-canvas sidebar navigation. It resolves the conflict between showcasing high-density visual content and maintaining a complex navigation structure. The layout hides primary links off-screen, revealing them through a staggered, hardware-accelerated slide sequence only when requested. (Requires: gsap.js, cssruleplugin.js)

This is a 3D Warp Speed Tunnel. It renders a four-sided grid tunnel utilizing CSS 3D transforms, through which animated gradient “beams” travel infinitely. Its function is to provide an immersive, spatial background for hero sections or focal cards, establishing a strong sense of velocity and technological depth. (Requires: GSAP, dat.gui)

This is a Footstep Cursor Trailer. It draws a decaying trail of alternating left and right vector footprints that follow the user’s pointer. Its function is to add a highly stylized, playful layer of interaction to empty background spaces, gamifying the simple act of moving a mouse. (Requires: GSAP)

This is a Kinetic SVG Parallax Grid Mask. It utilizes mathematical cursor tracking to offset a vectorized masking layer, revealing a secondary layer of animated, stepped shapes beneath. Its function is to create a playful, exploratory spatial interaction that rewards user movement without relying on heavy WebGL contexts. (Requires: GSAP)

This is a WebGL Lens Distortion Hover. It manipulates a raster image through a custom GLSL fragment shader to create a dynamic, fish-eye bulging effect. Its function is to replace static CSS opacity or scale transitions with a high-fidelity optical illusion, drawing profound tactile focus to portfolio or hero imagery. (Requires: GSAP, Curtains.js)

This is a WebGL RGB Shift Image Card. It renders a high-resolution raster image onto a 3D geometric plane, applying dynamic visual distortions based on pointer intersection. Its function is to elevate standard portfolio grids or hero sections into highly tactile, immersive experiences, replacing standard CSS transitions with complex mathematical pixel manipulation. (Requires: Three.js, GSAP)

This is a Draggable Grid Sorting Interface. It allows users to physically rearrange a 3x3 matrix of cards using fluid drag-and-drop mechanics. Its function is to provide an intuitive, visual method for reordering data sets, replacing static input fields with direct spatial manipulation. (Requires: GSAP.js, Draggable.js)

This is a Smooth Parallax Image Scroll Gallery. It translates vertical scroll progression into independent Y-axis movement for masked images. Its function is to create a sense of depth and momentum, elevating standard vertical feeds into immersive visual narratives. (Requires: gsap-js, scroll-trigger-js, lenis-js)

This is a Staggered Text Scroll Reveal. It parses structural typography into independent animated lines. Its function is to pace the reader’s attention, transforming static paragraphs into dynamic narrative elements triggered by viewport intersection. (Requires: gsap-js, scroll-trigger-js, lenis-js, split-type)

This is a Cinematic Masked Video Hero. It layers solid and outlined typography over an SVG-clipped video element to create optical depth. Its function is to immediately capture attention on landing, breaking away from standard rectangular layouts through organic polygon masking and staggered motion. (Requires: gsap-js)

This is an Interactive Zoom SVG Comic Viewer. It dynamically scales and spotlights individual comic panels within a massive, high-resolution raster image. Its function is to translate the physical experience of reading a comic book into a guided, cinematic digital flow, focusing user attention without losing the context of the page. (Requires: Gsap.js, Rx.js)

This is a Swinging Spotlight Text Reveal. It uses a virtual pendulum mask to selectively illuminate static vector letters as it passes over them. Its function is to direct user focus and add a tactile, environmental lighting effect to primary typographic elements. (Requires: gsap-js)

This is an Interactive Canvas Particle Image Effect. It reconstructs standard raster images using thousands of autonomous floating particles. Its function is to create a highly tactile visual experience that reacts to cursor proximity, morphing colors based on hidden alternate image data to remove the static barrier between user and interface. (Requires: GSAP)

This is an Interactive Physics-Based Dot Grid. It transforms a static matrix of circular DOM elements into a reactive, liquid-like surface. Its function is to provide an engaging, high-end visual toy or background element where the dots elastically pull toward the user’s cursor on hover, and dramatically explode outward with gravity-based physics upon clicking. (Requires: GSAP, Physics2DPlugin)

This is an Animated SVG Penrose Triangle Loader. It combines the impossible geometry of the Penrose triangle with a continuous circular spinner to create a hypnotic, high-fidelity loading animation. Its function is to provide a visually stunning and technically impressive waiting state for applications, using SVG filters and GSAP to add depth and motion. (Requires: GSAP)