29 GSAP Draggable.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.

This 3D Rotating iOS Time Picker recreates the tactile feel of native mobile controls on the web. It features three independently rotating wheels (Hours, Minutes, Meridiem) that snap into place with satisfying physics. The component leverages the cutting-edge Scroll-driven Animations API for buttery-smooth performance on supported browsers, while seamlessly falling back to GSAP for others. The 3D perspective creates a “drum” effect where numbers fade and rotate away as they leave the center view.

This Draggable 3D Cube goes beyond standard CSS 3D transforms by implementing a custom “lighting engine” using JavaScript. As the user drags to rotate the carousel, the opacity of each face is dynamically calculated based on its angle relative to the viewport. This creates a realistic shading effect - faces facing the viewer are bright and fully opaque, while those turning away fade into the background, enhancing the perception of depth without using WebGL.

This Draggable 3D Parallax Image Ring creates a high-end, immersive gallery experience often associated with WebGL, but built entirely with DOM elements and GSAP. It arranges images in a 3D circle that users can spin with a swipe or mouse drag. The standout feature is the calculated parallax effect: as the ring rotates, the background position of each image shifts in the opposite direction, creating a convincing illusion of depth and window-like transparency.

An interactive reaction slider powered by GSAP Draggable and TimelineMax, featuring a ‘gooey’ effect achieved via SVG feGaussianBlur and feColorMatrix filters.

An interactive skeuomorphic thermostat dial powered by GSAP Draggable. Rotating the dial dynamically updates the temperature value and ambient color hue, with full support for scale switching (C/F) and dark mode.

A fluid, tactile selection interface where elements “live” and react to scroll, creating a “fisheye” or lens effect.

A horizontal scroll interface featuring a “lens” effect powered by CSS Scroll-Driven Animations (animation-timeline: view(inline)).

A high-performance, fluid, and responsive slider rich in interactivity, where motions are synchronized with user actions to create a “weighted,” physically tangible interface feel.

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

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.

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.

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.

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.

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.

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.

See MorphSVG in action, transforming the SVG cord through a series of path shapes in a quick timeline to simulate a realistic tug, complemented by GSAP Draggable for interactive control and light state management.

The Screen-to-UV technique calculates cursor distance to cells in an isometric grid; the result controls a CSS variable to generate a “living” 3D surface effect using pure CSS/JS.

The demo showcases an advanced technique for building UI elements where CSS variables dynamically control the slider’s appearance, and JS libraries like GSAP and Tweakpane are used for animation and interactive parameter tweaking. This highlights how powerful JavaScript can complement CSS to create complex animations.

An interactive toggle with a “liquid” switching effect, built with GSAP and SVG filters. The demo shows how to combine physics-based animation (Draggable) with dynamic SVG effects (feGaussianBlur, feColorMatrix) to create a realistic, fluid user experience.

A slick, interactive showcase of 10 different preloader animations, utilizing GSAP’s Draggable and horizontal loop for smooth navigation, along with a dark/light theme toggle.

A feature-rich web animation showcasing an interactive 3D card with a hover-based parallax effect, a card-flipping animation, and dynamic SVG drawing and lighting effects all orchestrated by the powerful GSAP library.

The demo showcases a “card stack” UI effect where items can be navigated with buttons or by dragging with the mouse. It’s powered by React for state management and GSAP Draggable for the drag-and-drop logic and animation.

This demo highlights a fluid, infinite carousel powered by GSAP, using xPercent for true responsiveness with mixed-width content and the Draggable plugin for seamless, inertia-based interaction.

A high-end interactive menu that combines GSAP Draggable with advanced SVG displacement filters to create a tactile, distorted glass effect. It features an expandable UI with CSS transitions and inertia-based dragging, providing a masterclass in modern glassmorphism and organic web animations.