320+ GSAP.js Examples (Page 5)

An immersive, cinematic slider that feels like a high-budget interactive installation, thanks to its complex animations, custom cursor, and comprehensive input support.

A charming, emotional micro-interaction that transforms boring text input into a magical ritual of “saving” a wish.

A dynamic modal interaction orchestrated by GSAP timelines, featuring a cascading entry sequence. Upon triggering, the button morphs into the modal container, followed by a staggered reveal of content, imagery, and the close control, utilizing back-easing for a playful, spring-like feel.

A retro-futuristic styled radio button selection interface animated with GSAP.

When switching options, the user experiences a sharp, ’electric’ fill animation, reminiscent of a glitch in the matrix or a futuristic terminal interface.

Clicking an option triggers a sharp, ’electric’ fill animation with colored strips, reminiscent of a futuristic terminal interface or a glitch in the matrix.

The text appears as a massive, volumetric block that dynamically adjusts its height and perspective in response to mouse movement, ‘springing’ upon click to create a tactile sensation.

A cinematic hero section for a museum website featuring a synchronized text reveal animation powered by GSAP timelines and CustomEase. The layout utilizes fluid typography based on viewport width and intricate DOM segmentation, allowing syllables and UI elements to slide seamlessly into view over a looping background video.

A dynamic, broken image featuring twitching scanlines, color channel shifts, and geometric distortions, reminiscent of digital signal interference or vintage TV static.

Images drift horizontally at varying speeds and sizes, establishing a tangible sense of depth. Upon user interaction, the scroll accelerates or reverses direction with a satisfyingly elastic, spring-like response.

A playful and unconventional date selection method where the user ’travels through time’ by physically rotating the solar system.

A seamless image slider featuring an infinite-scroll SVG navigation menu powered by GSAP’s Observer plugin. The interaction logic translates scroll and swipe deltas into timeline progress, utilizing complex snapping algorithms and opacity tweens to create a fluid, kinetic browsing experience that dynamically updates the active index.

A fluid SVG interaction powered by GSAP’s MorphSVGPlugin that seamlessly deforms a button upon hover. The animation synchronizes the morphing of the container’s geometry with the underlying textPath baseline, allowing the label to curve naturally alongside the background shape via a reversible timeline.

This interactive checklist showcases a sophisticated “delete” micro-interaction, driven by a gsap.timeline that is triggered by a minimal JavaScript state machine. The timeline precisely choreographs a complex sequence of tweens, including a unique checkmark effect created with the DrawSVG plugin, to animate SVG <line> elements and the <label> into a fluid and satisfying animation.

This demo is a showcase of GSAP’s Flip plugin, a powerful tool for animating layout changes. The Flip.getState() and Flip.from() methods are used to seamlessly transition between four different CSS layouts, creating a complex and fluid morphing animation with minimal code.

This demo is a masterclass in scroll-driven animation, where GSAP’s ScrollTrigger plugin choreographs multiple, layered effects. A fluid parallax effect is created by using scrub: 1 to tie the yPercent and rotation of decorative elements directly to the scrollbar. This is complemented by a sophisticated text reveal, where GSAP’s SplitText plugin animates characters into view with a staggered opacity and y tween, demonstrating a powerful and modular approach to building complex, interactive scrolling experiences.

Experience a classic “pinned” horizontal scroll effect, where a vertical scroll action is converted into horizontal movement. GSAP’s pin: true property freezes the section in place, while a tween animates the x property of the inner container, creating a cinematic, side-scrolling gallery.

Experience a sophisticated “pinned” scrolling effect where a vertical scroll action drives a horizontal card carousel. GSAP’s pin: '.gallery' property freezes the component in the viewport, while ScrollTrigger’s onUpdate callback scrubs a GSAP timeline to animate the cards’ xPercent, scale, and opacity.

This component provides a delightful user experience by replacing the standard “show/hide” password icon with animated Pac-Man characters. The entire interaction is driven by two GSAP timelines, which not only move the characters but also change the input’s background and letter spacing, creating a fully immersive and playful UI.

This captivating slideshow is powered by a gsap.timeline that orchestrates a sophisticated “wipe” transition using an SVG <mask>. The timeline animates the xPercent of dynamically generated <rect> elements to reveal an image, while a simple setInterval function cycles through an array of content, updating the text and image source every 10 seconds to create a seamless, self-playing visual loop.

This captivating waterfall-style image reveal showcases a powerful synergy between technologies. A JavaScript for loop procedurally generates a series of <rect> elements within an SVG <mask>, which are then animated by GSAP in a continuous, yoyo-ing loop. The mesmerizing, chaotic effect is achieved using a random stagger (from: 'random') and a dramatic expo.easeInOut ease, creating a seamless and performant animation.

This animated donut character employs multiple GSAP timelines with elastic easing functions to create independent yet synchronized animations for body sway, facial expressions, and arm gestures.

Experience a fluid micro-interaction built with GSAP, where the animation state is fully reversible for a seamless toggle effect. The distinctive bouncy motion is crafted using the back.inOut(3) ease.

Live demo showcasing dynamic mix-blend-mode and background-blend-mode combinations. Interactive 3D tilt and SVG turbulence distortion trigger on hover.

A 3D scene from Spline is loaded using the Spline Runtime, and its objects are brought to life with programmatic animation in GSAP. This approach allows you to avoid low-level WebGL by using a powerful timeline to create complex interactive scenarios, with the code already containing stubs for finding and controlling objects.

A practical example of creating an organic and performant background using GSAP and SVG. Each line is animated along a unique trajectory with random parameters, creating an endless hypnotic motion.

A spectacular modal window animation built entirely on the GSAP Timeline. The sequence of element appearances, including a stagger effect for the content and smooth animation overlapping, is controlled with millisecond precision. The demo shows how custom ease functions add “life” and character to the animation.

A complex technical example demonstrating how to ensure animation functionality even without CSS animation-timeline: scroll() support. The code first checks for support and, if absent, uses GSAP ScrollTrigger as a polyfill for scroll-driven animation.

A practical example of using lifecycle callbacks in GSAP Draggable - onPressInit and onRelease toggle a CSS class on the body, triggering a smooth background animation for visual feedback during the interaction.

A texture morphing effect with 3D rotation on hover, implemented using Three.js and shaders (GLSL). The fragment shader uses the snoise3 function (simplex noise) to create an organic mixing mask for blending two images.