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

Hey everyone! Just playing with some super simple headline highlight effects, and thought I'd share them with you! Enjoy!

Headline Highlight + Display on Interaction

Headline Highlight + Display on Load/Scroll/Click

New cyberspace transmission detected. Please intercept and initiate visual scan...

The concept behind this website is that you 'Add to Cart' the different web elements you require to build your new website before checking out to open the contact form. No real products or transactions involved! The 3D images are modeled and rendered in Blender. Also includes a Sketchfab embed to view the 3D model. Thanks for looking! :-)

Web Elements

Web Elements 3D

A collection of useful animations made on wedflow.

Check out Webflow Samples 2: http://wfs2.webflow.io/

Webflow Samples

webflow-samples

Price calculator using custom java script code.
By https://www.webflow-experts.com/

Calculator

In celebration of cross-site copy/paste! - Pre-built elements and interactions for use on new projects. Film 4 style page transitions. Thanks for looking! :-)

Artefact

Experimental fan art using divs and svgs with mouse movement and scroll interactions. Great on desktop but too heavy for mobile... Thanks for looking!

Sky Box

Memberstack

I do a lot of reading on my laptop and tablet. The ability to change the background-color and font-color on demand keeps my eyes and/or head from aching. If you have late night readers on your sites, they might thank you for implementing something like this. It's exceptionally easy to do with Webflow.

I made the CSS sun and moon for fun. In real life, I would use a much smaller toggle that follows the reader the down the page.

Nightmode

Night Mode for Blogs & Articles | Cloneable

I have wasted lots of time over the years exploring all the css easing options that Webflow offers. That being said, I decided to make a one-page guide that conveniently displays all ease options at once. Feel free to clone it!

I hope this is helpful to you! Updated April 2021.

Webflow Easing

Webflow CSS Easing Visualized

Here's an example of using Webflow scroll interactions with Full Page JS by adding scrollBar:true to the custom code.

Full guide can be found here - https://www.digitalmast.co.uk/tutorials/full-page-js-interactions

fullPage JS Interactions

fullpage-js-interactions

Turn Webflow's tab component into a dropdown menu on mobile devices.

Content inside each tab doesn't need to be pushed under an (often) long list of tab links. Feel free to clone.

Webflow Tabs as Dropdowns

Turn Tabs Into a Dropdown Menu on Mobile Devices.

A marketing site and publishing platform I built for my for eco-startup Conservation Guide.

Designed to tell our story, to inspire people to volunteer with wildlife, and to be easily scalable when creating new blog and FAQ content.

Also includes a dark UI and some neat animal microinteractions to bring the pages to life - I plan to add more of these over time. 🦈

Conservation Guide

Welcome to Dribbble series, a new effort in which I attempt to bring to life interactions created by popular Dribble artists using only the elements supplied by Webflow! Today's project is based on 022 • Search by user Clara Boyle (https://dribbble.com/shots/5355680-022-Search)

Microinteractions are not only trendy, but a vital piece of user experience in 2018. Here's a simple, effective way to minimize and maximize a critical element of your site, the search function. with a simple click, the icon representing the action becomes the button for the action itself. Simple, easy, and intuitive. Clone away!

Search Interaction (022 • Search by Clara Boyle)

Trendy Search Interaction - 022 • Search by Clara Boyle - Joshwork Dribbble Series

Designed Sketch App Landing page in webflow with the use of interaction 2.0 and much more 
I hope you like it..!

Sketch app

Sketch App

Inspired by Nasa's amazing Visions of the Future poster series... Made with Interactions 2 and 3D Transforms. Thanks for looking! :-)

Cloud 9 Observatory

One of my favorite modern web effects is when a menu hides on scroll down and reveals on scroll up. Most mobile web browsers like Google Chrome do this for their top menus, and for good reason; moving these elements out of the way of the user allows the page content to reign supreme.

I use this effect on my personal site, and now so can you! You can also customize the delay or offset to whenever you'd like the menu to start disappearing or reappearing. Don't forget to like, comment, and clone away!

Menu Hide on Scroll

Fancy Hide/Show Menu on Scroll

Welcome to Dribbble series, where I attempt to bring to life projects created by popular Dribble artists using only the elements supplied by Webflow! Todays project is web design 04 - Photo Studio by Romeo M. • https://dribbble.com/shots/5593011-web-design-04-Photo-Studio

In my freelancing using Webflow, 95% of my work involves creating crazy, weird sliders that accomplish certain goals. This project is peak slider; displaying information, using grid, with customizations applied to the snide nav, arrows, & content.

For this project, I opted to change a few things that didn't make sense. For example, there were 3 different places in the page where social links were listed, which felt like overkill. I also nixed the mouse icon in the prev/next section, as the slider doesn't let you interact like that. Clone away, and let me know what you think in the comments! Be sure to download the Fontawesome font family to make sure the icons work (https://fontawesome.com/cheatsheet)

web design 04 - Photo Studio

CSS GRID HERO 2 - Dribbble Series - web design 04 - Photo Studio

Experimental site that demos z-axis scroll interactions using div blocks. Images and fonts blur when moved forwards or backwards on the z-axis but div blocks don't! Thanks for looking! :-) Jan 2022: z-axis transforms and perspective now a bit broken :-(

Quanto Font

Quanto

Welcome to Dribbble series, a new effort in which I attempt to bring to life interactions created by popular Dribble artists using only the elements supplied by Webflow! Todays project is S.M.A.T Lab / True AI by user Mike | https://dribbble.com/shots/5430800-S-M-A-T-Lab-True-AI).

Simply click a column and see the content change before your eyes! I'm a huge fan of how this turned out, on all viewports. And best of all, I got a wonderful excuse to test out CSS Grid. Clone away, and let me know what you think in the columns!