Building a Scrollable and Draggable Timeline with GSAP
In Tutorials, by Michelle Barker
Learn how to build a scrollable and draggable horizontal timeline using GSAP’s ScrollTrigger and Draggable plugins.
draggable
Creating an Infinite Circular Gallery using WebGL with OGL and GLSL Shaders
In Tutorials, by Luis Henrique Bizarro
A tutorial explaining how to build a draggable and scrollable infinite circular gallery using WebGL with OGL and GLSL Shaders.
Crafting a Scrollable and Draggable Parallax Slider
In Tutorials, by Ruud Luijten
A tutorial on how to build a slider with an interesting parallax effect that you can either scroll or drag through.
Image Dragging Effects
In Playground, by Manoela Ilic
A set of playful dragging effects for images using various techniques.
Draggable Menu with Image Grid Previews
In Playground, by Manoela Ilic
A draggable inline menu with a scattered thumbnail preview of an image grid.
Draggable Image Strip
In Playground, by Manoela Ilic
A draggable image strip layout with a content preview powered by Draggabilly and TweenMax.
How to Create a Sticky Image Effect with Three.js
In Tutorials, by Daniel Velasquez
A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js.
Playful Interaction for Draggable Elements
In Playground, by Manoela Ilic
A little playful interaction idea where we add some bounciness to a draggable element and animate it depending on its position.
Interactive Drag and Drop Coloring Concept
In Playground, by Manoela Ilic
A little fun experiment where you can color a website mockup by dragging and dropping a color droplet from a palette.
Playful Trampoline Effect
In Tutorials, by Manoela Ilic
A little playful content navigation effect that uses the draggable Elastic Stack and Snap.svg for animating a background shape like a trampoline. The demos are a tribute to Leonard Nimoy.
Elastic SVG Elements
In Playground, by Manoela Ilic
Some inspiration for elastic components with SVG shape animations for enhanced UI interactions.
Drag and Drop Interaction Ideas
In Playground, by Manoela Ilic
Some ideas for drag and drop interactions in a UI. The idea is to show a droppable area that stands for certain actions after an element is being dragged.
Draggable Dual-View Slideshow
In Playground, by Manoela Ilic
An experimental slideshow that is draggable and has two views: fullscreen and small carousel. In fullscreen view, a related content area can be viewed.
Elastic Stack: Elastic Dragging Interaction
In Playground, by Manoela Ilic
ElastiStack is a little script that let’s you navigate through a stack of items by dragging away the first one. It comes with an elastic touch meaning that when dragging the top-most item, the other ones will follow as if they were connected elastically. When reaching a certain distance, the dragged item will release itself and the next item will pop out.
Draggable Image Boxes Grid
In Tutorials, by Manoela Ilic
Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area.
Latest Tweets Tooltip with jQuery
In Playground, by cody
If you have a news website, it might be interesting for you to allow your users to see the latests tweets about a topic. Here is a jQuery plugin for […]
Interactive Photo Desk with jQuery and CSS3
In Playground, by Manoela Ilic
In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that […]
Sliding Checkbox Actions Menu with jQuery
In Tutorials, by Manoela Ilic
In this tutorial we will create an actions menu with jQuery that appears when checkboxes are selected. This can be a very helpful UI property since we don’t force the […]
