Life%20is%20a%20journey%2C%20just%20keep%20moving.
matthewpmunger has 444 followers on Webflow.
mattOS%20NCC21%20Virtual%20Badge
undefined
Tags:
Visit Site
Double%20Hover%20Effect
The%20challenge%20here%20is%20to%20reveal%20an%20image%20on%20first%20hover%20and%20remove%20the%20image%20on%20the%20second%20hover.%20Sounds%20simple%2C%20but%20it%20takes%20a%20sequence%20of%20triggers%20and%20invisible%20elements%20to%20control%20the%20interaction%20from%20happening%20when%20it%27s%20not%20intended.%20%0A%0AThis%20was%20posted%20in%20response%20to%20a%20question%20on%20the%20forum.%20https%3A//discourse.webflow.com/t/how-to-show-an-image-on-first-hover-and-then-hide-it-again-on-second-hover/187065%0A%0AThere%20is%20also%20a%20video%20walk%20through.%0Ahttps%3A//www.loom.com/share/10c2517552524885a0510b932412f8a6
Tags:
- interactions
- animation
- hover
Visit Site
mattOS
Update%20to%20my%20personal%20site.%20Took%20heavy%20inspiration%20from%20classic%20macOS.%20There%20are%20some%20fun%20experiences%20for%20visitors%20to%20find.%20%0A%0AEverything%20is%20done%20natively%20in%20Webflow%20using%20interactions%20including%20the%20color%20palette%20changes.%20I%27m%20using%20CMS%20collections%20to%20drive%20the%20projects%2C%20tutorials%2C%20videos%2C%20and%20Webflow%20Weekly%20contents.%0A%0AThe%20whole%20site%20is%20a%20single%20static%20page%20and%20then%20the%20collection%20pages.%0A%0AThe%20UI%20is%20the%20same%20no%20matter%20where%20you%20are%20thanks%20to%20symbols%20which%20makes%20edits%20much%20easier.%0A%0AClass%20naming%20and%20combo%20classes%20were%20huge%20for%20making%20the%20interface%20and%20interaction%20work%20smoothly.%0A%0AEDIT%202020-11-10%3A%20this%20can%20now%20be%20cloned
Tags:
- interactions
- ix2
- uidesigner
- ux/ui
- uxdesign
- cms
- zapier
- api
- portfolio
- mac
- macos
- apple
- computer
- nocode
Visit Site
breadcrumbs-for-cms-ecommerce
If%20you%u2019re%20working%20on%20an%20ecommerce%20site%20with%20more%20than%20a%20handful%20of%20products%2C%20you%u2019ll%20need%20a%20way%20to%20organize%20them.%20The%20organizational%20method%20involves%20adding%20product%20labels%20and%20allowing%20site%20visitors%20to%20navigate%20quickly%20across%20product%20lines.%20Let%u2019s%20look%20at%20how%20to%20do%20this.%0A%0ASomewhere%20in%20the%20multiverse%2C%20this%20type%20of%20navigable%20organization%20got%20the%20tasty%20title%20of%20breadcrumbs.%20Because%20sometimes%2C%20just%20like%20our%20friends%20Hansel%20and%20Gretel%2C%20we%20want%20to%20follow%20the%20digital%20trail%20with%20delicious%20stops%20along%20the%20way.
Tags:
- ecommerce
- breadcrumb
- navigation
- cms
- references
Visit Site
Water%20Waves%20Simulation
Got%20inspired%20to%20recreate%20how%20water%20molecules%20behave%20in%20a%20wave.%20Science%20+%20Webflow%20%3D%20Fun%21%0A%0AUse%20the%20buttons%20to%20change%20the%20look%20of%20the%20particles.%20The%20order%20you%20click%20the%20buttons%20will%20also%20affect%20the%20look.%0A%0AInspiration%20Source%3A%0A%22Water%20waves%20are%20an%20example%20of%20waves%20that%20involve%20a%20combination%20of%20both%20longitudinal%20and%20transverse%20motions.%20As%20a%20wave%20travels%20through%20the%20waver%2C%20the%20particles%20travel%20in%20clockwise%20circles.%20The%20radius%20of%20the%20circles%20decreases%20as%20the%20depth%20into%20the%20water%20increases.%20The%20animation%20at%20right%20shows%20a%20water%20wave%20travelling%20from%20left%20to%20right%20in%20a%20region%20where%20the%20depth%20of%20the%20water%20is%20greater%20than%20the%20wavelength%20of%20the%20waves.%20I%20have%20identified%20two%20particles%20in%20orange%20to%20show%20that%20each%20particle%20indeed%20travels%20in%20a%20clockwise%20circle%20as%20the%20wave%20passes.%22%20Daniel%20A.%20Russell%2C%20Graduate%20Program%20in%20Acoustics%2C%20The%20Pennsylvania%20State%20University%0A%0Ahttps%3A//www.acs.psu.edu/drussell/Demos/waves/wavemotion.html
Tags:
- interactions
- animation
- ix2
Visit Site
CSS%20Color%20Scheme%3A%20prefers%20%28dark%29
With%20Safari%20Technology%20Preview%2068%20and%20MacOS%2010.14%2C%20it%20is%20now%20possibly%20for%20the%20browser%20to%20recognize%20if%20the%20operating%20system%20is%20configured%20to%20dark%20mode%20and%20adjust%20the%20css%20as%20defined%20by%20the%20@media%20query.%20Soon%20this%20will%20become%20supported%20by%20all%20major%20browsers%20and%20operating%20systems.%0A%0ATry%20it%20out%20and%20see%20how%20it%27s%20done.%0A%0AThen%20vote%20for%20Webflow%20to%20support%20this%20in%20the%20Designer.%20https%3A//wishlist.webflow.com/ideas/WEBFLOW-I-1553
Tags:
- darkmode
- dark
- color
- scheme
- css
- safari
Visit Site
Grid%20Image%20Reveals
An%20idea%20for%20animating%20some%20image%20reveals%20on%20page%20load.%20It%20utilizes%20the%20grid%20to%20customize%20each%20images%20load%20and%20hover%20effect%20for%20very%20different%20looks.%20The%20amazing%20thing%20is%20that%20adjusting%20the%20grid%20was%20the%20only%20change%20needed.%20All%20four%20images%20use%20the%20same%20interactions%21%20Grid%20basically%20enhances%20the%20power%20of%20interactions%20to%2011.%0A%0AHopefully%20you%20enjoy%20digging%20around%20the%20project%20and%20feel%20free%20to%20clone.%20Cheers%21
Tags:
- grid
- cssgrid
- animation
- interaction
Visit Site
mario-maze-game
Enjoy%20playing%20this%20interactive%20Mario%20Maze%20Game%20built%20entirely%20in%20Webflow%20with%20no%20code.%20Feel%20free%20to%20clone%20and%20inspect%20the%20project.
Tags:
- interactive
- interactions2
- webflowix2
- animated
- game
- play
- mario
- yoshi
Visit Site