Discover the best draggable websites created by professional designers. Get inspired and start planning your perfect draggable web design today!

Click anywhere on the page for sound when scrolling

Portfolio Lists

Personal website using Locomotive scrolling. 

Webflow Design & Development | Koyi Tsang

Personal portfolio with locomotive scroll

In an industry where everyone tries to look and act the same, it takes true bravery to be embrace your uniqueness and be different. Welcome to the funnest wedding photographer website you've ever seen.
Designed by tricksdesign.com

Watch our design process for this site at https://www.youtube.com/watch?v=k3ZX4F5PnB4

Mack & Pouya Photography

Project by Jesper Landberg at https://codepen.io/ReGGae/pen/eYGyLrP

(It doesn't look like this project was built to work on touch devices)

Infinite Grid (All Directions)

Infinite Draggable / Scrollable Grid

Recreation of the map found at  https://www.netflixshadowandbone.com/map

This cloneable is for learning purposes only. I do not own the rights to this design and content.

Draggable Map

ThreeSixtyEight

Watch the tutorial at https://www.youtube.com/watch?v=AG_REG9p61E

CMS Draggable Slider

CMS Draggable Slider Tutorial

Here's a parallax slider I built on top of the https://flickity.metafizzy.co/ library. Navigate by dragging or using your arrow keys.

Idea inspired by https://tympanus.net/codrops/2020/12/01/crafting-a-scrollable-and-draggable-parallax-slider/

Parallax Slider

Parallax Slider Tricks

Watch the tutorial at https://www.patreon.com/posts/68438340

Velocity

Velocity-Based Interactions

A macOS styled portfolio.

Completely built only using Webflow Interactions. A basic Jquery code to enable draggable feature.

Another fun cloneable for the Webflow community.

MacOS Portfolio

MacOS Big Sur Portfolio Website

A gallery of images that can be dragged to reveal new items.
⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃
Take a look at our latest Portfolio Template 
https://louis-template.webflow.io/  
⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃
➊ Website @ www.fouroom.co
➋ Templates @ https://webflow.com/templates/designers/fouroom
➌ Twitter @ www.twitter.com/foouroomdotco
➍ Instagram @ www.instagram.com/fouroom.co
➎ Dribbble @ www.dribbble.com/fouroom

Draggable Image Gallery

Infinite Parallax Slider

CMS slider with progress bar built using Splide slider.

https://splidejs.com/

Splide Slider

CMS Slider with Progress Bar

Learn more about Dragdealer.js at https://www.patreon.com/posts/57936686

Images from https://k72.ca/en/about

Draggable Progress Bar Slider

Rebuild of https://khaby.iconmagazine.de/

Watch the tutorial at https://www.youtube.com/watch?v=KnXk0nEP0nM

Draggable Scrub Through Images

"Drag and drop so simple it hurts" - Dragula

Yes, there are lots of Javascript libraries out there for this purpose, but Dragula is a fun combination of good branding and smart programming. You can take advantage of it by cloning this project, or using the Github repo at https://github.com/bevacqua/dragula

Draggable and Droppable

Draggable & Droppable

Folow my Webflow Tips on my Youtube Channel : https://www.youtube.com/alextourgis

Webflow Tips N°6 : Draggable Content

Webflow Tips : Draggable Content

Grindstone was created as an editorial-style e-commerce website for small shops. 

If you like this site, subscribe at www.someother.studio for updates on new clonables!

Use this however you like and let me know what you think in the comments :)

Stock image credits: Unsplash & Pexels

Grindstone Ecommerce

grindstonefurniture-clonable

Timothy Ricks has tutorial pn this, check it out in the project. I can't get the background videos to show, but it drags and the arrow buttons work.

I also added the ability to slide through with your trackpad and made it smooth on mobile, so you can slide, drag and click this slider. Theres a little webkit code that hides the scrollbar too.

Discover draggable websites built by the Webflow community

Discover draggable websites built by the Webflow community