320+ GSAP.js Examples (Page 2)

This is a Twisted Wave GLSL Image Gallery. It’s a high-performance, full-screen WebGL experience that uses custom shaders to create sophisticated visual effects. Its function is to transform a standard image carousel into a cinematic journey with two distinct interactions: a localized sine-wave distortion on mouse hover and a global radial blur that intensifies with the speed of the scroll. (Requires: Three.js, GSAP, Locomotive Scroll, Maku.js, imagesLoaded)

This snippet showcases a GSAP ScrollTrigger List Expansion effect. It mimics the native iOS “Notification Center” or “Wallet” card stack behavior. Its function is to condense a long list of items into a compact, layered visual stack, and then fluidly expand them into full, scrollable cards as the user scrolls down the container, creating a highly tactile mobile UI experience. (Requires: GSAP, ScrollTrigger)

This Interactive Morphing Task List Item is a high-fidelity productivity component. It combines path interpolation with auditory feedback to validate user actions. Its function is to elevate simple “to-do” lists into rewarding, tactile experiences through state-driven motion. (Requires: GSAP, MorphSVGPlugin)

This is a Lenis Smooth Scroll & GSAP Page. It transforms a standard one-page website into a high-end, cinematic scrolling experience. Its function is to provide an exceptionally fluid and responsive interface by replacing native “jumpy” browser scrolling with the physics-based smoothness of Lenis, while using GSAP’s ScrollTrigger to orchestrate a series of staggered animations that reveal content as the user navigates down the page. (Requires: GSAP, Lenis, ScrollTrigger)

This is a Lenis Smooth Scroll Cinematic Experience. It transforms a standard single-page portfolio or narrative website into an immersive, high-end digital journey. Its primary function is to replace jarring browser scrolling with the fluid, physics-based motion of Lenis, while using GSAP’s ScrollTrigger plugin to orchestrate a complex sequence of cinematic animations, including a “film roll” header, an expanding video player, and a dramatic footer reveal. (Requires: Lenis, GSAP, ScrollTrigger)

This is a 3D Interactive MacBook Model. It utilizes Three.js to load, texture, and animate a high-fidelity .glb model of a laptop. Its function is to create a premium, cinematic product showcase, replacing static hero images with a fully interactive WebGL scene that animates through a complex opening and booting-up sequence. (Requires: Three.js, GSAP, lil-gui)

This is an Animated Fruity Product Showcase. It acts as a high-impact hero section for a product landing page. Its function is to create a sense of dynamic energy through synchronized GSAP animations, where product imagery “falls” into view, titles update with staggered transitions, and ripple-wave effects surround the navigation buttons. (Requires: GSAP)

This is an Animated Power-Up Button. It replaces standard interaction states with a visually rich, multi-layered animation sequence. Upon clicking, the button rotates, and a series of semi-transparent shadow layers stagger-in behind it, creating a “motion blur” or “power-up” trail effect. Its function is to provide highly stylized feedback for high-impact actions. (Requires: GSAP)

This is an Interactive Feather Reveal 404 Page. It utilizes the Canvas 2D API to transform a sterile error screen into a generative digital canvas. The component records user movement to stamp intricate feather-shaped paths that alternate between solid black fills and clipped fragments of external bird photography. (Requires: GSAP, Lodash)

This is a GSAP Magic Hover Areas component. It creates an animated, floating background layer that physically tracks the user’s cursor or keyboard focus across different interactive elements on the page. It adds a cohesive, fluid spatial awareness to standard list items and navigation menus. (Requires: GSAP, Lodash.js, VanillaTilt.js)

This is a Neumorphic Drag Dial Thermostat. It provides a tactile, skeuomorphic interface for setting numerical values (like temperature) through rotational dragging or keyboard input. The dial dynamically reveals cool-to-warm gradient colors based on the current value, enhancing the physical “feel” of a smart home control panel. (Requires: GSAP, Draggable)

This is a Tilt Grid Content Reveal. It transforms a standard masonry image gallery into a highly interactive, spatial experience. Its function is to provide an engaging browsing interface where hovering induces physical 3D tilt, and clicking smoothly expands the thumbnail into a full-screen presentation, completely immersing the user in the selected content. (Requires: GSAP, charming.js, masonry.js, imagesloaded.js)

This is an Animated Star Toggle Switch. It replaces a standard HTML checkbox with a highly expressive, character-driven micro-interaction. Its function is to provide emotional feedback to a binary choice (like “favorite” or “bookmark”), launching the star into the air where it physically morphs between a sad, grey orb and a happy, bright yellow star. (Requires: GSAP)

This is a Shattering Image Gallery Transition. It utilizes the WebGL API via Three.js to deconstruct 2D images into a matrix of 3D particles. Its function is to replace standard fade or slide slideshows with a highly cinematic, physics-based explosion effect, transitioning between photographs by blowing the current image apart to reveal the next one underneath. (Requires: ThreeJS, GSAP)

This is a Sci-Fi Reticule Play Button. It replaces static interaction states with an immersive, HUD-like sequence. Its function is to trigger a process (like loading data or initializing an app) while providing real-time visual feedback through an animated percentage counter and expanding SVG geometry. (Requires: GSAP, DrawSVGPlugin, ScrambleTextPlugin)

This is a Smooth Scroll Stacking Accordion. It replaces standard click-to-open accordions with a scroll-driven interaction. Its function is to pin a section of content and compress multiple information cards into a stacked deck as the user scrolls down the page. (Requires: GSAP, ScrollTrigger, ScrollSmoother)

This is a Morphing Blob Image Carousel. It utilizes procedural geometry and GSAP to generate a continuously shifting SVG mask over an image slider. Its function is to break the rigid, rectangular grid of standard web layouts. The organic motion draws the eye, making the standard act of cycling through images feel fluid and tactile. (Requires: gsap.js)

This is a Morphing Liquid SVG Mask Button. It masks a raster image (marble texture) with a dynamic SVG shape that transforms into a “gooey” blob upon interaction. Its function is to create a high-end, organic reveal effect for primary calls-to-action, replacing standard rectangular hover states with fluid motion. (Requires: gsap.js, gsap-morphsvg-plugin.js)

This is a Smooth 3D Scroll-Driven Reveal. It replaces the native scroll behavior with a custom, momentum-based scrolling engine that orchestrates complex 3D transforms. Its function is to create a gallery experience where images feel weightless, tilting and translating in 3D space based on their velocity and position relative to the viewport. (Requires: imagesloaded.js)

This is an Animated Geometric GSAP Preloader. It utilizes precise JavaScript timeline sequencing to manipulate three basic DOM elements into a shifting, continuous puzzle. Its function is to hold user attention during prolonged data fetching. The effect is heavily mechanical, converting simple CSS shapes into an illusion of complex, articulating parts. (Requires: gsap-js)

This is an Interactive Download Folder Animation. It replaces a static download button with a lively, physics-based micro-interaction. Its function is to provide immediate, satisfying visual confirmation of a user action. The effect drops a new document into a stacked folder, triggering a synchronized elastic bounce across multiple UI layers. (Requires: gsap.js)

This is a Liquid Filling Heart Interaction. It visualizes a “pumping” effect by animating a fluid level inside a heart-shaped container. Its function is to serve as a playful, interactive state indicator — like a “like” button or health bar — that responds to user clicks with a simulated hydraulic fill and a 3D perspective jolt. (Requires: gsap.js)

This is a Scroll-Driven Dynamic Marquee Frame. It creates a continuous perimeter ticker that bounds the viewport. Its function is to provide persistent context by reflecting the currently active section’s title. It transforms static reading into a reactive environment, updating both edge typography and core background colors as the user scrolls. (Requires: gsap.js, scroll-trigger.js)

Pinned Split-Screen Mask Reveal is a high-performance scroll-driven layout. It synchronizes fixed image stacks with flowing text content. This element creates a cinematic transition where images are “unmasked” as the user progresses through sections. It is designed to bridge the gap between static information and immersive visual storytelling. (Requires: gsap-js, scroll-trigger-js, lenis-js)

Pagination is often reduced to a blinking light — a teleportation of state. This component rejects that abstraction. It treats the active indicator as a physical object with mass and momentum. By forcing the dot to leap through space to reach its destination, we create a tactile narrative of travel. It transforms a mundane click into a playful, satisfying interaction that mimics the physics of a board game piece. (Requires: gsap)

In the sterile world of web interfaces, a touch of whimsy can be the difference between a user forgetting your site and remembering it with a smile. This snippet isn’t just an animation; it’s a digital sticker with a soul. It brings the static ritual of coffee to life through squash-and-stretch principles, transforming a simple icon into a living character that breathes, reacts, and delights. (Requires: gsap, morphsvg)

Static text is a relic of print media. In the digital realm, typography should possess momentum and weight. This component transforms a standard headline into a kinetic event. By synchronizing rotation with advanced clipping masks, we create the illusion of text being physically “printed” or “wiped” into existence at high velocity. It is visceral, rhythmic, and designed to command attention without screaming. (Requires: gsap)

Most interfaces treat layout changes as abrupt cuts in a film — jarring and disconnected. We reject this. UI should behave like matter, conserving momentum and mass. This component demonstrates the “impossible”: animating a flexbox container from a horizontal row to a vertical column seamlessly. It creates a sense of spatial continuity that makes the application feel not like software, but like a living organism adapting to user intent. (Requires: gsap, flip-plugin)

We accept flatness in web interfaces as a constraint, but it is merely a habit. This component breaks the fourth wall, transforming a static modal into a tangible, digital artifact. By coupling mouse physics with deep perspective, we create an interaction that feels less like clicking a link and more like holding a rare collectable. (Requires: gsap)

Forms are traditionally cold and utilitarian. This component challenges that norm by injecting emotional intelligence into the user interface. By mapping a range slider to animated character states, we transform a simple data input into a conversation. It turns the abstract concept of “satisfaction” into a relatable, human narrative, encouraging users to engage more deeply with the feedback process. (Requires: gsap)