New%20free%20cloneable%20every%20Monday%20%u26A1%uFE0F%20Follow%20me%20on%20Twitter%20to%20get%20notified.
kevinhaag has 502 followers on Webflow.
MM%u2014021%3A%20Crystal%20Ball%20Button
Fun%20little%20native%20glowing%20crystal-ball%20hover%20interaction.%20Hover%20to%20seeee%20your%20futureeeeeee.%0A%0A%u2705%20Native%20Interactions%0A%u274C%20Custom%20Code%0A%0A--%0A%0AFollow%20me%20on%20Twitter%3A%20https%3A//twitter.com/kevinhaag%0ASubscribe%20on%20Youtube%3A%20https%3A//youtube.com/kevinhaagsucks
Tags:
- micromonday
- microinteraction
- button
- glowing
- gradient
- blurrygradients
- auroragradient
- ix2
Visit Site
MM%u2014020%3A%20Login%20Panel
Just%20a%20clean%20and%20minimal%20little%20login%20overlay%20panel%20interaction.%0A%0A%u2705%20Native%20Interactions%0A%u274C%20Custom%20Code%0A%0A--%0A%0AFollow%20me%20on%20Twitter%3A%20https%3A//twitter.com/kevinhaag%0ASubscribe%20on%20Youtube%3A%20https%3A//youtube.com/kevinhaagsucks
Tags:
- micromonday
- microinteraction
- ix2
- login
- signup
- overlay
- panels
- authentication
Visit Site
MM%u2014019%3A%20Glowing%20Reflective%20Card
Inspired%20by%20@philipcdavis%27s%20awesome%20SwiftUI%20experiment%2C%20%28https%3A//twitter.com/philipcdavis/status/1509200015587041281%29%20I%20wanted%20try%20to%20recreating%20it%20in%20Webflow%20and%20ended%20it%20up%20taking%20it%20a%20little%20further%20by%20adding%20reflectivity%20as%20well.%0A%0AEnjoy%21%0A%0A%u2705%20Native%20Interactions%0A%u274C%20Custom%20Code%0A%0A--%0A%0AFollow%20me%20on%20Twitter%3A%20https%3A//twitter.com/kevinhaag%0ASubscribe%20on%20Youtube%3A%20https%3A//youtube.com/kevinhaagsucks
Tags:
- glow
- glowing
- reflection
- light
- hologram
- holographic
- micromonday
- microinteraction
- ix2
Visit Site
MM%u2014018%3A%20Glass%20Navigation%20Bar
I%27m%20back%21%20Just%20a%20tiny%20little%20native%20interaction%20to%20get%20MicroMonday%20started%20again.%20Enjoy%21%0A%0A%u2705%20Native%20Interactions%0A%u274C%20Custom%20Code%0A%0A--%0A%0AFollow%20me%20on%20Twitter%3A%20https%3A//twitter.com/kevinhaag%0ASubscribe%20on%20Youtube%3A%20https%3A//youtube.com/kevinhaagsucks
Tags:
- navbar
- navigation
- microinteraction
- glowing
- glass
- glassmorphism
- ix2
- micromonday
Visit Site
.gif)
MM%u2014017%3A%20Seamless%20Page%20Transition
Uses%20just%20a%20small%20snippet%20of%20custom%20code%20to%20allow%20the%20page%20time%20to%20complete%20the%20exit%20transition%20and%20then%20redirects%20to%20the%20new%20page.%0A%0ASet%20your%20links%20to%20preload%20your%20pages%20for%20even%20better%20performance.%20More%20info%20on%20that%20here%3A%20https%3A//webflow.com/feature/enable-link-prefetching-and-prerendering-to-improve-performance.%0A%0A%u2705%20Native%20Interactions%0A%u2705%20Custom%20Code
Tags:
- micromonday
- interactions
- microinteractions
- transition
- pagetransitions
- seamless
- animations
- ix2
Visit Site
.gif)
MM%u2014016%3A%20Snapping%203D%20Slide%20Transition
The%20first%20MicroMonday%20of%202022%21%20And%20I%20know%2C%20I%20know%u2014scrolljacking%20sucks...%20but%20here%27s%20an%20example%20using%20CSS%20only%2C%20no%20JS%21%20You%20could%20remove%20the%20scroll-snapping%20if%20you%20wanted%20and%20still%20have%20native-only%20scroll%20transitions%20though%2C%20if%20you%20prefer.%0A%0A%u2705%20Native%20Interactions%0A%u2705%20Custom%20CSS%0A%0A--%0A%0AFollow%20me%20on%20Twitter%3A%20https%3A//twitter.com/kevinhaag%0ASubscribe%20on%20Youtube%3A%20https%3A//youtube.com/kevinhaagsucks
Tags:
- micromonday
- scrolljacking
- scrollify
- ix2
- interactions
- microinteractions
- slides
- fullpage%20slider
Visit Site
.gif)
MM%u2014015%3A%20Aurora%20Gradient
Not%20the%20most%20performant%20of%20effects%2C%20but%20it%20could%20be%20tweaked%20it%20into%20something%20cool%20probably.%20Also%2C%20it%20was%20a%20good%20excuse%20to%20celebrate%20the%20new%20backdrop-filters%20%uD83C%uDF89%20%28this%20won%27t%20work%20in%20Firefox.%29%0A%0A%u2705%20Native%20Interactions%0A%u2705%20Custom%20Code%20%28just%20one%20line%20of%20CSS%29%0A%0A--%0A%0AFollow%20me%20on%20Twitter%3A%20https%3A//twitter.com/kevinhaag%0ASubscribe%20on%20Youtube%3A%20https%3A//youtube.com/kevinhaagsucks
Tags:
- micromonday
- auroragradient
- gradient
- mouseeffects
- hovereffects
- interactions
- microinteractions
- animation
- ix2
Visit Site
MM%u2014014%3A%20Dark-Mode%20Toggle%20Button
A%20fully%20native%20animated%20dark-mode%20toggle%20button.%20%0A%0A%u2705%20Native%20Interactions%0A%uD83D%uDEAB%20Custom%20Code%0A%0A--%0A%0AFollow%20me%20on%20Twitter%3A%20https%3A//twitter.com/kevinhaag%0ASubscribe%20on%20Youtube%3A%20https%3A//youtube.com/kevinhaagsucks
Tags:
- micromonday
- microinteraction
- ix2
- animated
- darkmode
- darkmodetoggle
- lightmode
- lightmodetoggle
Visit Site
.gif)
NCC2021%20Badge%20-%20Kevin%20Haag
undefined
Tags:
- ncc2021
- badge
- conference
- nocodeconf
- hologram
Visit Site
%23FigmaPrototypeChallenge%20Cards
Saw%20this%20tweet%20by%20Ana%20Boyer%2C%20and%20well%2C%20challenge%20accepted%21%0A%0Ahttps%3A//twitter.com/_AnaBoyer/status/1457757202043715589
Tags:
- figma
- figma2webflow
- cards
- hovercard
- interactions
Visit Site
MM%u2014013%3A%20Zooming%20%26%20Panning%20Images
Back%20from%20a%20week%20off%2C%20here%27s%20an%20entirely%20native%20zooming%20and%20panning%20interaction%20for%20all%20that%20delicious%20detail%20in%20your%20photos.%0A%0A%u2705%20Native%20Interactions%0A%uD83D%uDEAB%20Custom%20Code%0A%0A--%0A%0AFollow%20me%20on%20Twitter%3A%20https%3A//twitter.com/kevinhaag%0ASubscribe%20on%20Youtube%3A%20https%3A//youtube.com/kevinhaagsucks
Tags:
- micromonday
- nativewebflow
- zoom
- imagezoom
- panning
- interactions
- ix2
Visit Site
MM%u2014012%3A%203D%20Spiral%20Menu
Keeping%20it%20simple%20again%20this%20week%2C%20this%20time%20100%25%20native%20Webflow.%0A%0A%u2705%20Native%20Interactions%0A%uD83D%uDEAB%20Custom%20Code%0A%0A--%0A%0AFollow%20me%20on%20Twitter%3A%20https%3A//twitter.com/kevinhaag%0ASubscribe%20on%20Youtube%3A%20https%3A//youtube.com/kevinhaagsucks
Tags:
- micromonday
- menu
- interactions
- microinteractions
- 3dtext
Visit Site
MM%u2014011%3A%20Retro%203D%20Grid
Just%20a%20simple%20little%20retro%203d%20grid%20effect%20with%20optional%20scan-lines%20overlay.%0A%0A%u2705%20Native%20Interactions%0A%u2705%20Custom%20CSS%20%28optional%29%0A%0A--%0A%0AFollow%20me%20on%20Twitter%3A%20https%3A//twitter.com/kevinhaag%0ASubscribe%20on%20Youtube%3A%20https%3A//youtube.com/kevinhaagsucks
Tags:
- micromonday
- 3danimation
- animation
- retro
- 3dgrid
- scifi
Visit Site
MM%u2014010%3A%20Stopwatch%20Timer
Ok%20ok%2C%20so%20it%27s%20not%20an%20atomically%20accurate%20stopwatch%20%28performance%20may%20vary%29%2C%20and%20it%27s%20DEFINITELY%20not%20the%20best%20way%20to%20%22code%22%20a%20stopwatch...%20but%20it%20was%20fun%20to%20make.%0A%0A--%0A%0A%u2B1B%uFE0F%20%u2B1B%uFE0F%20%u2B1B%uFE0F%20%u2B1B%uFE0F%20%u2B1B%uFE0F%20%uD83D%uDD32%0ANative%20Interactions%0A%0A%u2B1B%uFE0F%20%uD83D%uDD32%20%uD83D%uDD32%20%uD83D%uDD32%20%uD83D%uDD32%20%uD83D%uDD32%0ACustom%20Code%20%28just%20a%20%uD83E%uDD0F%29%0A%0A--%0A%0AFollow%20me%20on%20Twitter%3A%20https%3A//twitter.com/kevinhaag%0ASubscribe%20on%20Youtube%3A%20https%3A//youtube.com/kevinhaagsucks
Tags:
- stopwatch
- clock
- timer
- ix2
- micromonday
- microinteraction
- interactions
- time
Visit Site
Numbered%20Pagination%20Links
Ever%20wanted%20to%20add%20numbered%20page%20links%20to%20your%20CMS%20Collection%20Lists%3F%20Now%20you%20can%20with%20a%20little%20snippet%20of%20custom%20code.%0A%0A--%0AFollow%20along%20for%20more%21%0A%0AFollow%20me%20on%20Twitter%3A%20https%3A//twitter.com/kevinhaag%0ASubscribe%20on%20Youtube%3A%20https%3A//youtube.com/kevinhaagsucks
Tags:
Visit Site