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

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

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

Drag & Drop

Drag & Drop Tricks

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

Revising my boilerplate, needed a scroll so made one.
Smooth Scroll + Mouse Drag Scroll (optional), in less than 200 lines of vanilla JS.


Completely configured by data-attributes for wf.

You can control the scrolling element (data-scroll), a factor for scroll speed (data-factor="{number}" and if mouse dragging is supported (data-mouse="true/false").


It's also webGl ready and supports speed, but for that you'll want to fork the sandbox here (https://codesandbox.io/s/smooth-scroll-2qfif).

(!) Definitely not tested throughly, so use it at your own risk.
(:) Would love feedbacks on breaking cases and strange behaviours.


-- I'm currently working on an actual one that also solves a couple of webflow problems regarding position sticky and while scrolling animations but that's not happening anytime soon. I'll post on twitter when (and if) it's to a publishable state. This one does not. But position sticky is horrible anyway.


👀

Smooth and Drag Scroll

Minimal Smooth and Drag Scroll ⟋ lib

"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

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.

Dragable CMS Slider

Draggable CMS Slider

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

Webflow Tips N°6 : Draggable Content

Webflow Tips : Draggable Content

«Cyboro» app takes care of copyright, privacy and digital security on the Web. It’s crucial to have an eye on all the trends and new technology that helps to use the Internet without risk.

Cyboro Parallax Effect

Parallax effect of abstract elements

A simple project to teach how to use jQuery in a Webflow project via custom code in the page settings

Note: The "draggable" doesn't work on mobile

Feel free to clone and enjoy!

Create Your Monster

Create Your Monster! - jQuery

Random dump of unfinished things made in 2021 that for one reason or another have never seen the light. 1/∞

Testing realtime refraction in WebGl with moving background (tricky part). Text animation is bad and definitely not to be seen on mobile. Might not work and could definitely use a preloader.

Click and drag to navigate.

👀

glass-cube

Realtime Refraction (WebGl)

JavaScript library for reorderable drag-and-drop lists

Check the demo and clone it to use.

Draggable list items

Here is a mix of two previous tips to create a Typing Terminal. There are four different styles that you can easily modify: Green, Light, Dark and Blue.

Some custom code was used for the typing effect (using typed.js library’s) and some custom css was used to modify the cursor color. 

Details:

✔ Calculate Div Dimensions
✔ Finsweet Client-First V1
✔Drag Window

Previous tips used in this mix:

https://www.webflowtips.com/b/how-to-create-a-browser

Sign up for the lesson: www.webflowtips.com/b/how-to-create-a-terminal-with-a-typing-animation 

If you have any questions feel free to comment. 

P.S Like or follow if this was useful for you 🙂 🙌

Typing Terminal

Typing Terminal - 4 Styles!

Based on the client first model and the Digidop website

webflowagency

webflowagency-test

Browser based artwork by Peachey & Mosig. The premise is straightforward, a group of artists come together and go for a walk with no specific outcome in mind. Overtime the location and make-up of the artists may change but the basic premise is the same.

We Went For A Walk

we-went-for-a-walk

Memberstack

Happy Thursday!

Want to add some interactivity to your Webflow form? Check out this tutorial on creating a draggable input that you can style in Webflow! 

Users can drag and drop items to change the order, and the values are saved in a form-friendly input. 

Just copy and paste the code and you're good to go. There's a tutorial video once you open the live site and I'm happy to answer questions if you leave me a comment. 

This draggable input adds a new level of interactivity to your Webflow forms. Try it out and enhance the user experience on your website!

Draggable Inputs | Webflow Form UI Kit

Draggable Inputs | Drag and Drop | Webflow Form UI Kit

To help the guests, I created this landing page with the necessary information for the wedding.

Darian & Darlan

Wedding Darian & Darlan

A website for the first queer arts organization in Yavapai County, House of Hues.

Discover drag websites built by the Webflow community

Discover drag websites built by the Webflow community