Life is a journey, just keep moving.
matthewpmunger has 58 followers on Webflow.
CSS Color Scheme: prefers (dark)
With Safari Technology Preview 68 and MacOS 10.14, it is now possibly for the browser to recognize if the operating system is configured to dark mode and adjust the css as defined by the @media query. Soon this will become supported by all major browsers and operating systems.
Try it out and see how it's done.
Then vote for Webflow to support this in the Designer. https://wishlist.webflow.com/ideas/WEBFLOW-I-1553
Tags:
- darkmode
- dark
- color
- scheme
- css
- safari
Visit Site
The Road Goes Ever On
Using grid to layout the entire page, because I wanted to display footsteps animating along a line. Seemed like a good fit for grid.
Needed words to express something about the path being travelled down the page and Tolkien's "The Road Goes Ever On" seemed like a great fit. Plus combining my love for Webflow and Middle Earth can't be bad. Source credit for the sketches is at the bottom of the page.
Tags:
- grid
- cssgrid
- interaction
- scroll
Visit Site
Fluid Fullscreen Menu
LEARN how to make a fluid fullscreen menu interaction.
Here is a toggle button that animates into a fullscreen menu. The challenge was to transition a circle shape into a rectangle shape of the browser's viewport. It is responsive and works no matter the screen orientation.
Shout out to @Oakland Agency and the Burgers Vol 1 project. This tutorial is using the Burger 3 Button.
Tags:
- interaction
- ix2
- menu
- burger
- fullscreen
Visit Site
Grid Image Reveals
An idea for animating some image reveals on page load. It utilizes the grid to customize each images load and hover effect for very different looks. The amazing thing is that adjusting the grid was the only change needed. All four images use the same interactions! Grid basically enhances the power of interactions to 11.
Hopefully you enjoy digging around the project and feel free to clone. Cheers!
Tags:
- grid
- cssgrid
- animation
- interaction
Visit Site
Japanese Grid
My first play with Webflow's CSS Grid feature. Saw an awesome display at a Japanese restaurant in the Houston airport and knew it was meant to be recreated in Webflow. The inspirational image is hidden in the grid.
Clone if you'd like to. Enjoy!
Tags:
Visit Site
Vertical Expanding CMS Photo Cards
This simple experiment uses a single CMS collection list and a single interaction to create this effect. Upon scrolling these "photo cards" grow when near the center of the page and shrink as they exit. The photo inside the card is fixed as is the background photo. The two work together for a nice visual transition that keeps the eye focused on the central card.
This was inspired from a Dribbble shot by Kévin Gautier. https://dribbble.com/shots/5097519-California-National-Park-Guide
Forum Discussion: https://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 proof of concept for an interaction based off a Dribbble by Dennys Hess. https://dribbble.com/shots/4527247-Portfolio
Tags:
- animation
- interaction
- ix2
- mousemovement
Visit Site
Interactive Button: Text Slide Up
Tags:
- button
- text
- interaction
- hover
Visit Site
Flexible Foxy.io Store
The goal of this project was to test the flexibility that Foxy provides when implemented using the Webflow CMS. Specifically how is it possible to mix'n'match a combination of variants and add-ons to a store of different types of products. Some of these big box ecommerce solution either can't handle this challenge or charge higher plan pricing to do so.
Forum Discussion: https://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 cart
Visit Site
image-warp
Choose an image below to load. Then move your mouse around the viewport to warp or stretch the image. Created using 1 image and 1 iX2 animation.
Tags:
- webflowix2
- animation
- interaction
- hover effects
- images
Visit Site
mario-maze-game
Enjoy playing this interactive Mario Maze Game built entirely in Webflow with no code. Feel free to clone and inspect the project.
Tags:
- interactive
- interactions2
- webflowix2
- animated
- game
- play
- mario
- yoshi
Visit Site
time-based-reveal
This site uses a simple line of javascript to reveal a different alert for each day of the week by analyzing which day, month, or date it is and showing the related element.
Feel free to clone or inspect. The code is injected in the page settings.
Big thank you to @samliew for making this possible.
Tags:
Visit Site
Rise Above
Long scroll homepage with interactions and static navbar.
Tags:
- interactions2
- scroller
- parallax
Visit Site
Jed Chappell
Here's a single page bio site which is primarily to acquire an interest in booking speaking engagements. Used the new IX2 to create the movement and interaction throughout.
Tags:
- webflowix2
- bio
- single page
Visit Site
Grounds 4 Compassion
Premium Coffee With Conviction
There's a lot of love that goes into each cup of G4C coffee that you drink. Get some coffee for your home or to give to family and friends.
Tags:
- commerce
- shopify
- coffee
- interactions
- animation
Visit Site