Life%20is%20a%20journey%2C%20just%20keep%20moving.
Found in: %uD83C%uDDFA%uD83C%uDDF8%u279C%20%uD83C%uDDEC%uD83C%uDDE7%u279C%20%uD83C%uDDF1%uD83C%uDDF8%u279C%20%uD83C%uDDE8%uD83C%uDDF7
matthewpmunger has 122 followers on Webflow.
mattOS
Been%20working%20on%20an%20updated%20to%20my%20personal%20site.%20Took%20heavy%20inspiration%20from%20classic%20macOS.%20There%20are%20some%20fun%20experiences%20for%20vistors%20to%20find.%20Everything%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.%20The%20whole%20site%20is%20a%20single%20static%20page%20and%20then%20the%20collection%20pages.%20The%20UI%20is%20the%20same%20no%20matter%20where%20you%20are%20thanks%20to%20symbols%20which%20makes%20edits%20much%20easier.%0A%0AClass%20naming%20and%20combo%20classes%20where%20huge%20for%20making%20the%20interface%20and%20interaction%20work%20smoothly.%0A%0AThere%20are%20still%20more%20planned%20enhancements%20and%20tweaks%20to%20the%20site.%20Looking%20forward%20to%20improving%20the%20design%20further.%0A%0AWebflow%20Weekly%20will%20be%20updated...%20weekly.%20Oh%20and%20that%20content%20is%20driven%20by%20tags%20in%20Pocket%20that%20trigger%20Zapier%20which%20pulls%20the%20content%20and%20puts%20it%20in%20Webflow%20and%20then%20tweets%20about%20it%20on%20Twitter.%20%uD83E%uDD13%20BTW%20you%20can%20follow%20me%20if%20you%20like.%20@matthewpmunger
Tags:
- interactions
- ix2
- uidesigner
- ux/ui
- uxdesign
- cms
- zapier
- api
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
S.T.O.R.M.
It%20was%20really%20enjoyable%20figuring%20out%20some%20custom%20interactions%20for%20this%20client%20site%20for%20the%20testimonial%20sections%2C%20section%20edges%2C%20and%20the%20fullscreen%20menu.%20It%20also%20has%20a%20Webflow%20Ecommerce%20store%20for%20their%20gear.%0A%0AIf%20you%20like%20the%20menu%20interaction%2C%20feel%20free%20to%20clone%20it%20or%20learn%20from%20it%20here.%20http%3A//bit.ly/2PDz9Yx
Tags:
- nonprofit
- interactions
- cms
- ecommerce
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
Sweet%20Shoppe%20-%20Ecommerce%20Breadcrumbs
If%20you%u2019re%20working%20on%20an%20Ecommerce%20site%20with%20more%20than%20a%20baker%u2019s%20dozen%20products%20then%20you%20might%20want%20a%20way%20to%20organize%20those%20products.%20Somewhere%20in%20the%20multiverse%20this%20type%20of%20navigable%20organization%20got%20the%20yummy%20title%20of%20breadcrumbs.%20%0A%0AIf%20you%u2019d%20like%20to%20inspect%20or%20clone%20the%20Sweet%20Shoppe%20project%2C%20you%20can%20do%20just%20that.%20There%u2019s%20also%20a%20video%20version%20of%20this%20tutorial%20if%20you%20learn%20better%20that%20way.
Tags:
- ecommerce
- product
- cms
- navigation
- breadcrumb
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
The%20Road%20Goes%20Ever%20On
Using%20grid%20to%20layout%20the%20entire%20page%2C%20because%20I%20wanted%20to%20display%20footsteps%20animating%20along%20a%20line.%20Seemed%20like%20a%20good%20fit%20for%20grid.%20%0A%0ANeeded%20words%20to%20express%20something%20about%20the%20path%20being%20travelled%20down%20the%20page%20and%20Tolkien%27s%20%22The%20Road%20Goes%20Ever%20On%22%20seemed%20like%20a%20great%20fit.%20Plus%20combining%20my%20love%20for%20Webflow%20and%20Middle%20Earth%20can%27t%20be%20bad.%20Source%20credit%20for%20the%20sketches%20is%20at%20the%20bottom%20of%20the%20page.
Tags:
- grid
- cssgrid
- interaction
- scroll
Visit Site
Fluid%20Fullscreen%20Menu
LEARN%20how%20to%20make%20a%20fluid%20fullscreen%20menu%20interaction.%0A%0AHere%20is%20a%20%20toggle%20button%20that%20animates%20into%20a%20fullscreen%20menu.%20The%20challenge%20was%20to%20transition%20a%20circle%20shape%20into%20a%20rectangle%20shape%20of%20the%20browser%27s%20viewport.%20It%20is%20responsive%20and%20works%20no%20matter%20the%20screen%20orientation.%0A%0AShout%20out%20to%20@Oakland%20Agency%20and%20the%20Burgers%20Vol%201%20project.%20This%20tutorial%20is%20using%20the%20Burger%203%20Button.
Tags:
- interaction
- ix2
- menu
- burger
- fullscreen
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
Japanese%20Grid
My%20first%20play%20with%20Webflow%27s%20CSS%20Grid%20feature.%20Saw%20an%20awesome%20display%20at%20a%20Japanese%20restaurant%20in%20the%20Houston%20airport%20and%20knew%20it%20was%20meant%20to%20be%20recreated%20in%20Webflow.%20The%20inspirational%20image%20is%20hidden%20in%20the%20grid.%0A%0AClone%20if%20you%27d%20like%20to.%20Enjoy%21
Tags:
Visit Site
Vertical%20Expanding%20CMS%20Photo%20Cards
This%20simple%20experiment%20uses%20a%20single%20CMS%20collection%20list%20and%20a%20single%20interaction%20to%20create%20this%20effect.%20Upon%20scrolling%20these%20%22photo%20cards%22%20grow%20when%20near%20the%20center%20of%20the%20page%20and%20shrink%20as%20they%20exit.%20The%20photo%20inside%20the%20card%20is%20fixed%20as%20is%20the%20background%20photo.%20The%20two%20work%20together%20for%20a%20nice%20visual%20transition%20that%20keeps%20the%20eye%20focused%20on%20the%20central%20card.%0A%0AThis%20was%20inspired%20from%20a%20Dribbble%20shot%20by%20K%E9vin%20Gautier.%20https%3A//dribbble.com/shots/5097519-California-National-Park-Guide%0A%0AForum%20Discussion%3A%20https%3A//forum.webflow.com/t/dribbble-inspired-vertical-expanding-cms-photo-cards/67772/2
Tags:
- animations
- interactions
- cms
- cards
Visit Site
mouse-over-page-reveal
Simple%20proof%20of%20concept%20for%20an%20interaction%20based%20off%20a%20Dribbble%20by%20Dennys%20Hess.%20https%3A//dribbble.com/shots/4527247-Portfolio
Tags:
- animation
- interaction
- ix2
- mousemovement
Visit Site
Interactive%20Button%3A%20Text%20Slide%20Up
undefined
Tags:
- button
- text
- interaction
- hover
Visit Site
Flexible%20Foxy.io%20Store
The%20goal%20of%20this%20project%20was%20to%20test%20the%20flexibility%20that%20Foxy%20provides%20when%20implemented%20using%20the%20Webflow%20CMS.%20Specifically%20how%20is%20it%20possible%20to%20mix%27n%27match%20a%20combination%20of%20variants%20and%20add-ons%20to%20a%20store%20of%20different%20types%20of%20products.%20Some%20of%20these%20big%20box%20ecommerce%20solution%20either%20can%27t%20handle%20this%20challenge%20or%20charge%20higher%20plan%20pricing%20to%20do%20so.%0A%0AForum%20Discussion%3A%20https%3A//forum.webflow.com/t/ecommerce-tutorial-foxy-io-webflow-cms-clonable/62857
Tags:
- foxy
- foxycart
- ecommerce
- e-commerce
- product
- products
- bestecommerce
- variants
- addons
- cart
- shopping
- shopping%20cart
Visit Site
image-warp
Choose%20an%20image%20below%20to%20load.%20Then%20move%20your%20mouse%20around%20the%20viewport%20to%20warp%20or%20stretch%20the%20image.%20Created%20using%201%20image%20and%201%20iX2%20animation.
Tags:
- webflowix2
- animation
- interaction
- hover%20effects
- images
Visit Site