mattOS NCC21 Virtual Badge

The challenge here is to reveal an image on first hover and remove the image on the second hover. Sounds simple, but it takes a sequence of triggers and invisible elements to control the interaction from happening when it's not intended. 

This was posted in response to a question on the forum. https://discourse.webflow.com/t/how-to-show-an-image-on-first-hover-and-then-hide-it-again-on-second-hover/187065

There is also a video walk through.
https://www.loom.com/share/10c2517552524885a0510b932412f8a6

Double Hover Effect

Update to my personal site. Took heavy inspiration from classic macOS. There are some fun experiences for visitors to find. 

Everything is done natively in Webflow using interactions including the color palette changes. I'm using CMS collections to drive the projects, tutorials, videos, and Webflow Weekly contents.

The whole site is a single static page and then the collection pages.

The UI is the same no matter where you are thanks to symbols which makes edits much easier.

Class naming and combo classes were huge for making the interface and interaction work smoothly.

EDIT 2020-11-10: this can now be cloned

mattOS

If you’re working on an ecommerce site with more than a handful of products, you’ll need a way to organize them. The organizational method involves adding product labels and allowing site visitors to navigate quickly across product lines. Let’s look at how to do this.

Somewhere in the multiverse, this type of navigable organization got the tasty title of breadcrumbs. Because sometimes, just like our friends Hansel and Gretel, we want to follow the digital trail with delicious stops along the way.

breadcrumbs-for-cms-ecommerce

Got inspired to recreate how water molecules behave in a wave. Science + Webflow = Fun!

Use the buttons to change the look of the particles. The order you click the buttons will also affect the look.

Inspiration Source:
"Water waves are an example of waves that involve a combination of both longitudinal and transverse motions. As a wave travels through the waver, the particles travel in clockwise circles. The radius of the circles decreases as the depth into the water increases. The animation at right shows a water wave travelling from left to right in a region where the depth of the water is greater than the wavelength of the waves. I have identified two particles in orange to show that each particle indeed travels in a clockwise circle as the wave passes." Daniel A. Russell, Graduate Program in Acoustics, The Pennsylvania State University

https://www.acs.psu.edu/drussell/Demos/waves/wavemotion.html

Water Waves Simulation

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

CSS Color Scheme: prefers (dark)

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!

Grid Image Reveals

Enjoy playing this interactive Mario Maze Game built entirely in Webflow with no code. Feel free to clone and inspect the project.

Matthew P Munger

About

About

About