320+ GSAP.js Examples (Page 6)

A complex GSAP timeline simulating a cursor controlling a loader. The main feature is the use of .tweenTo(pos) to smoothly transition the loader to a set position within a spinning animation, synchronized with the cursor’s movement.

An implementation of a sliding puzzle using GSAP Draggable - featuring a custom snap function for grid alignment and onThrowComplete logic that uses hitTest to determine move validity and trigger the swap animation.

A complex micro-animation for a tab bar where GSAP keyframes and morphSVG create smooth, “elastic” transitions between icon states, while state management is implemented in vanilla JS.

A complex micro-animation using GSAP, where a single click triggers a chain of tweens for asynchronous icon movement and simultaneous container pulsation via the scale property.

Technical relevance: the use of GSAP to control strokeDashoffset on the mask with looping and different easing, - resulting in a stylized “wave” effect gliding over complex, pre-defined SVG Bézier curves.

An interactive SVG slider using GSAP Draggable, where the drag progress animates not only the filling of a bottle via an SVG mask but also creates a liquid sloshing effect using modifiers.

A demonstration of an advanced GSAP technique for an infinite carousel, where the animation of each element is cyclically repeated with precise staggering, creating the feeling of continuous 3D space.

Interactive typography with GSAP and SplitText - when one letter is dragged, the effect elastically propagates to its neighbors, dynamically changing their font-weight and scaleY.

Explore how a GSAP timeline is used to create a complex movement sequence using keyframes and onComplete callbacks to ensure smooth and realistic transitions between poses. All control is implemented via keyboard and touch event handlers.

Explore the powerful tandem of GSAP and CSS Variables, where to/fromTo with keyframes control SVG elements inside Radio/Checkbox/Switch. The animations utilize the feColorMatrix filter (the “Gooey” effect) and SVG transforms to create smoothly “flowing” shapes and stylish toggles.

Interactive buttons with dual animation - GSAP handles the tooltip appearance, while a CSS class change on click triggers the SVG checkmark animation via stroke-dashoffset.

A demonstration of a cutting-edge React component using GSAP for complex SVG animation, including path morphing and simultaneous background color change. The technical highlight is the control of the complex animation timeline from a container React component via React.createRef.

Classic ‘scrollytelling’ with GSAP - creating the illusion of movement by animating transform: translateX on position: fixed elements based on the vertical scroll of an extra-long page.

This interactive mini-game is a showcase for modern front-end development, utilizing GSAP’s TweenMax for smooth, complex ball and scene animations, and a well-structured ES6 class system to manage the game logic, score, and responsive scaling.

A sleek, animated segmented control using GSAP for smooth slide and a subtle 3D-like tilt effect on click, providing a polished micro-interaction.

Uses the PIXI.js WebGL renderer to draw dynamic, hardware-accelerated connection lines between content hotspots, enhanced by GSAP for the smooth ‘magnetic’ displacement effect upon mouse hover.

Dynamic “button-to-modal” transition animation built with vanilla JavaScript and GSAP, featuring adaptive scaling calculation for correct display on all screen sizes.

An advanced tab system where all elements (text, images, and navigation) are synchronized into a single, fluid transition, utilizing gsap.timeline() for precise control over fading, sliding, and animation timing.

Complex Path Morphing at the intersection of technologies: the demo uses the GSAP library to interpolate coordinates sampled from SVG paths and renders the result with frame-by-frame precision using the Canvas API.

An interactive 3D coin spin animation implemented by rendering 260 pre-shot frames onto a Canvas; spin control, inertia, and movement physics are handled by the combination of GSAP and the Draggable Plugin.

Achieve a premium, vibrant glow and pulsating background with this component, which utilizes high-performance CSS animations and dynamic box-shadow effects, all orchestrated by TypeScript and the GSAP library.

A demo showcasing an adaptive, unique “ring” pie chart design using SVG circles, where each segment is animated and colored from a predefined JavaScript array.

A sleek text hover and intro animation, implemented using GSAP to smoothly transition CSS gradient stops via modern CSS variables, ensuring high performance and clean, maintainable code.

A polished implementation of GSAP’s ScrollTrigger that links main page scroll to a custom animated timeline, utilizing Draggable for precise, responsive horizontal navigation and enhanced by cinematic scroll-based section transitions.

The demo uses GSAP to programmatically control the CSS mask property and applies the ease: steps() function for precise, frame-by-frame switching between 20 sprite mask states, creating a drawing or layered revelation effect.

Showcasing the power of GreenSock’s FLIP technique to smoothly animate CSS Grid layout changes, including alphabetical sorting and DOM element manipulation.

A modern, interactive Claymorphism UI toggle built entirely with scalable SVG vector graphics and animated via GSAP showcases intricate shadow effects and the “liquid” transition of its internal elements.

Utilizing the powerful GSAP FLIP technique to flawlessly transform a 2D button into a highly detailed 3D object (a spinning coin) created with the lightweight Zdog library, ensuring a smooth transition between DOM and 3D graphics.

This demo showcases advanced THREE.js implementation using coordinate wrapping and custom shaders to create a highly performant, infinitely scrollable and draggable WebGL grid with motion-based visual feedback.

An interactive thermostat implemented in Vanilla JS leverages the Draggable library for rotation input and arrow keys for step-by-step adjustments, with Canvas used for the visualization of temperature activity.