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

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

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

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

Just a simple little retro 3d grid effect with optional scan-lines overlay.

✅ Native Interactions
✅ Custom CSS (optional)

--

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

Retro 3D Grid

MM—011: Retro 3D Grid

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

Uses just a small snippet of custom code to allow the page time to complete the exit transition and then redirects to the new page.

Set your links to preload your pages for even better performance. More info on that here: https://webflow.com/feature/enable-link-prefetching-and-prerendering-to-improve-performance.

✅ Native Interactions
✅ Custom Code

Seamless Page Transition

MM—017: Seamless Page Transition

MicroMonday—002. Stacking slider inspired by housesof.world.

✅ Native Interactions
🚫 Custom Code

--

Follow along for more!

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

Stacking Slider

MM—002: Stacking Slider

A simple little expanding tabs interaction for this MicroMonday #4. Clone away!

✅ Native Interactions
🚫 Custom Code

--

Follow along for more!

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

Expandable Tabs

MM—004: Expandable Tabs

Fun little native glowing crystal-ball hover interaction. Hover to seeee your futureeeeeee.

✅ Native Interactions
❌ Custom Code

--

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

Crystal Ball Button

MM—021: Crystal Ball Button

Inspired by the search suggestions seen on Instagram, (and a tweet https://twitter.com/_MarlonJames/status/1437622870935490562), here's MicroMonday #7!

✅ Native Interactions
✅ Custom Code

--

Follow along for more!

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

Search Suggestions

MM—007: Search Suggestions

I'm back! Just a tiny little native interaction to get MicroMonday started again. Enjoy!

✅ Native Interactions
❌ Custom Code

--

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

Glass Navigation

MM—018: Glass Navigation Bar

A fully native animated dark-mode toggle button. 

✅ Native Interactions
🚫 Custom Code

--

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

Dark Mode Toggle Button

MM—014: Dark-Mode Toggle Button

Here's MicroMonday #9: kinda video-gamey, use your arrow keys or your mouse to navigate.

--

⬛️ ⬛️ ⬛️ ⬛️ 🔲 🔲
Native Interactions

⬛️ ⬛️ 🔲 🔲 🔲 🔲
Custom Code

--

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

Keyboard Controlled Menu

MM—009: Keyboard Menu

Back from a week off, here's an entirely native zooming and panning interaction for all that delicious detail in your photos.

✅ Native Interactions
🚫 Custom Code

--

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

Zooming & Panning Images

MM—013: Zooming & Panning Images

Just a simple little effect you can apply to your maps to make them ✨POP✨ (You'll need to generate your own Google Maps API key — instructions here: https://university.webflow.com/lesson/map)

Discover micromonday websites built by the Webflow community

Discover micromonday websites built by the Webflow community