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

Daily Direction Tutorial set. A range of really nice micro interaction for your personal projects.

Tutorials: https://www.youtube.com/watch?v=zRnR7hu2EoU&list=PL4y7e0E80p44ddI_hKSB2bu26rFCdDFfc

Hope you enjoy.

Daily Direction

Daily Direction Micro Interactions

I wanted something engaging and original, that utilised everything Webflow can offer, it's playful with 3D Tranforms and Interactions to create a hopefully, engaging experience and showcase my work in its best light.

Aaron Grieve Portfolio

Aaron Grieve's Portfolio

Wanted to play around with the new interaction types in IX2, and as always got a little carried away. All the design credit goes to M S Brar's "Capture Moments" (https://dribbble.com/shots/6291284-Capture-Moments), which I tasked myself with building as reference. Really happy with how it came out.

Peep the microinteractions on the menu button and the funky scroll indicator (which changes to reflect the device type you're on 😍).

Lemme know what you think in the comments!

Capture Moments - M S Brar - Dribbble Series

NEW Slider Interactions! - Dribbble Series Ft. M S Brar

MicroMonday #8:

✅ Native Interactions
✅ Custom CSS

--

Follow along for more!

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

Direction-Aware Slider

MM—008: Direction-Aware Slider

Slider animation made in Webflow makes design very smooth and fun!

Сheck out more:
 👉 dribbble.com/halolab
 👉 instagram.com/halolabteam
 —
We provide design-driven development of your product for years to come. Our team focuses on UI/UX design, web development, branding & marketing

A breathtaking slider with ellipse-to-square conversion

The first MicroMonday of 2022! And I know, I know—scrolljacking sucks... but here's an example using CSS only, no JS! You could remove the scroll-snapping if you wanted and still have native-only scroll transitions though, if you prefer.

✅ Native Interactions
✅ Custom CSS

--

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

Snapping 3D Slide Transition

MM—016: Snapping 3D Slide Transition

Keeping it simple again this week, this time 100% native Webflow.

✅ Native Interactions
🚫 Custom Code

--

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

3D Spiral Menu

MM—012: 3D Spiral Menu

Inspired by @philipcdavis's awesome SwiftUI experiment, (https://twitter.com/philipcdavis/status/1509200015587041281) I wanted try to recreating it in Webflow and ended it up taking it a little further by adding reflectivity as well.

Enjoy!

✅ Native Interactions
❌ Custom Code

--

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

Glowing Reflective Card

MM—019: Glowing Reflective Card

This is the MicroMonday cloneable I've been most excited to release yet! Open the live site to check it out.

Currently working in Chrome and Firefox, it needs further work to get it working for Safari, but I was too jazzed on it to not get it out. If anyone has any ideas to improve it for Safari, hmu!

✅ Native Interactions
✅ Custom Code

--

Follow along for more!

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

TV Backlight

MM—003: Glowing TV Backlight Effect

Kubo's uniqueness lies in the combination and enhancement of two senses: olfaction & taste.
This website was created to introduce this concept providing the ability for visitors to buy products and book pastry workshop.
I have made the whole graphic design, brand identity and webdesign.

kubo-v2

kubo-patisserie.com

Here is a simple scroll animation; the purpose is to indicate to the user the page is scrollable. This may seem like second nature to scroll web pages but surprisingly not always.

Scroll Indicator Animation

Normally, Webflow's native slider stops autoplaying as soon as you interact with it (which is usually what you want) but here's a version that continues to play even after interacting with it.

This way, we can continue to track progress nicely with a little Lottie animation on the next button.

✅ Native Interactions
✅ Custom Code (CSS-only)

--

Follow along for more!

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

Timed Automatic Slider

MM—006: Timed Automatic Slider

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

Not the most performant of effects, but it could be tweaked it into something cool probably. Also, it was a good excuse to celebrate the new backdrop-filters 🎉 (this won't work in Firefox.)

✅ Native Interactions
✅ Custom Code (just one line of CSS)

--

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

Aurora Gradient

MM—015: Aurora Gradient

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

Bookmark

Inspired by Sania Saleh for Strategyzer
Rooftop's closest free alternative typeface: Arimo by Steve Matteson 

------------------------------------------------------------- 

Work at a design firm looking for a Webflow dev team for your next brand project? Let’s chat

🔷 https://calendly.com/bookmark-wf/webflow-chat

 -------------------------------------------------------------

#1 Column/Row Size Change on Mouse Movemenet

001 - 100 Days of Webflow Interactions

Magnetic buttons are sorta like regular buttons, if regular buttons were zapped to life with witchcraft by html super-wizards from the future 🧲🧙‍♂️🧲🧙‍♂️

In all seriousness, this type of button is a dead-simple, easy way to add effective hover micro-interactions to any website. I hope you enjoy exploring how these buttons were made. Hopefully it helps spread understanding of the power of reusable interactions; one mouse movement interaction powers 90% of the button movement in this project.

Clone away, and let me know what you think in the comments!

*Inspired by this post from CoDrops:
https://tympanus.net/codrops/2020/08/05/magnetic-buttons/

**Like this project?
http://buymeacoffee.com/joshwork

Magnetic Buttons

🧲🧙‍♂️ MAGNETIC buttons, from the future! 🧲🧙‍♂️

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

Based on https://kirschberg.co.nz/

Discover microinteraction websites built by the Webflow community

Discover microinteraction websites built by the Webflow community