33 JavaScript Drag and Drop

This is a Draggable Image Track Parallax component. It replaces standard scrollbars with a custom, click-and-drag horizontal interface. Its function is to provide a highly kinetic, app-like browsing experience for image galleries, featuring an internal parallax effect where the images pan slightly inside their frames as the entire track moves.

This is a Tinder-style Swipeable Card Stack. It replicates the iconic “swipe-left, swipe-right” user interface for decision-making. Its function is to provide a mobile-first, gesture-driven method for navigating through a collection of items (in this case, recipe cards), where each card is physically dragged and dismissed to reveal the next one in the stack.

This is a Scroll-Driven Jigsaw Puzzle Assembler. It utilizes SVG patterns and CSS variables to deconstruct a single image into interactive, interlocking pieces. Its function is to provide a cinematic content reveal where scrolling physically assembles the visual asset from a scattered state into a coherent whole.

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 Glass Photo Lens creates a stunning, tactile digital object - a thick glass block that refracts user-uploaded photos. Built with Three.js, it simulates the physics of light (transmission, IOR, thickness) to produce high-fidelity glass renders directly in the browser. Users can change the lens shape (Heart, Square, Hexagon), adjust the glass tint, and even modify the environmental lighting to see how reflections dance across the beveled edges.

This Interactive SVG Color Wheel is a sophisticated design tool built directly into the browser. It allows users to explore color harmonies - Analogous, Complementary, Triadic, Tetradic - by dragging a handle across a mathematically generated wheel. The interface reacts instantly, updating the background, UI elements, and data display with the selected palette, powered by the precision of Chroma.js and GSAP animations.

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 intuitive task management interface that instantly updates the visual status of items as they are moved.

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 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.

XState-powered drag & drop implementation with finite state machine. Features visual state transitions, smooth animations, and contextual feedback.

Integration of Drag and Drop functionality using Dragula.js and Web Components. The Dragula script handles the drop event, dynamically changing the background color of the stage container via a CSS variable taken from the dragged element.

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.

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.

This purely vanilla JS/CSS image carousel delivers superior performance with native drag-and-wheel input support, dynamically controlling the 3D-like layout using calculated CSS Custom Properties for position and depth.

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 immersive 3D Circular Slider using GSAP for smooth, complex transform animations and rotations, creating a perspective-driven carousel where card properties are dynamically mapped and updated upon rotation.

This demo shows how to create a useful and interactive schedule widget with synchronized horizontal scrolling for the header and content. It implements drag navigation and dynamically determines and positions the current time.

A showcase of the synergy between JavaScript and CSS to create a detailed 3D element with a parallax effect. It uses requestAnimationFrame for performance-optimized calculation of velocity and position, and transform-style: preserve-3d for correct layer rendering.

Interactive CSS counter demo with draggable sections. Sortable enables nested block reorganization, tweakpane controls counter start and increment values. shiki generates live syntax highlighting. Visualizes CSS variables --section-start and --section-increment.