Discover the best click websites created by professional designers. Get inspired and start planning your perfect click web design today!

Josh Jacobs

Hey everyone! Just playing with some super simple headline highlight effects, and thought I'd share them with you! Enjoy!

Headline Highlight + Display on Load/Scroll/Click

Timothy Ricks

Tutorial: https://www.youtube.com/watch?v=Q17Q5-isg0I

Based on this shot by Cuberto https://dribbble.com/shots/6358927-Mitosis-After-Effects

Note: This experimental goo effect does not yet work on Safari.

Gooey Card Effect

WebDev For You

Welcome to Daily Interaction #132.

This demo showcases a fullscreen menu animation when clicking on the menu trigger.

For this effect the menu comes down and lines scale in to create an interesting effect. The menu items also reveal from top to bottom. The menu items are in a wrapper set to an overflow of hidden so it creates the reveal effect. There is also a submenu at the bottom of the menu that fades in and moves up from the bottom. The scale, opacity, and move animations for the menu elements were set in interactions.

There is also a menu trigger animation that turns the menu lines into an x on click, and then reverses on second click.

Inspired by: https://animal.cc/

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev For You - Daily Interaction #132

Memberstack

MemberStack is a designer-friendly membership platform that works with Webflow. 

------------ 

Modals are an excellent way to help your users feel in control. Let them create an account or log in to an existing account without ever having to leave the page. 

------------ 

To get started - create a free MemberStack account, and add the URL of your new site during setup.

#10 - Login and Signup Modals

Kai Jolly

Custom product display - Thanks for looking :-)

Collection 1 // Bake 010

Welcome to daily interaction #110.

This demo showcases a social media card animation on click. For this demo I have 3 social media cards appear below the profile card on click. This effect was achieved by resizing the social media blocks from 0 to it's original size which causes the up and down motion of the profile card at the top. I also used scale, move, and opacity transformations in interactions to change the 'contact me' button from text to an arrow. Another 'contact me' text also appears in the lower left hand corner of the card when clicking.

Inspired by: https://codepen.io/BeanBaag/pen/dzyGpM

https://www.webdevforyou.com/

If you'd like more information on how this interaction was accomplished be sure to join the Slack Community!

WebDev For You - Daily Interaction #110

This demo showcases a grid menu animation on click. The menu wrapper consists of 2 grids - one 3x3, and a smaller 4x8 nested grid in the lower left. The panels scale in from bottom to top and left to right. The text also appears in a staggered motion from bottom to top. On close the text fades out and moves back down, and the menu panels scale back to 0 in a staggered motion.

WebDev For You - Interaction #144

This demo showcases an 11x11 grid menu animation on click. The different blocks in the grid appear in a specific pattern and are staggered to create the effect. The staggered effect plays in the opposite direction when the menu closes. The menu items inside of the grid menu also have a micro-interaction applied.

WebDev For You - Interaction #145

Watch the tutorial for the project at https://www.youtube.com/watch?v=RvYpljqbdK8

Budget App Interactions Example

JP Dionisio

Simple button animation for a ripple effect where the user clicks on the button. Nothing much else to say. Try it out!

Feel free to clone!

Ripple at Mouse Click

Mikhail Voloshin

It’s time to improve the accessibility of modal dialogs!

Closing modal window on the ESC button. 99ui#8

También

Lateral menu animation on click 
Tutorial : https://www.youtube.com/watch?v=JIoc4GTE_DQ&t=14s&ab_channel=Tambi%C3%A9n

Webflow Tips N°13 : Lateral menu animation

Jakob Wrs

Nice move animation

Welcome to daily interaction #62.

This demo showcases a side menu animation on click.

Inspired by: https://archi-graphi.fr/

To view more daily interactions and premium content visit: https://www.webdevforyou.com/

WebDev For You - Daily Interaction #62

Halo Lab

Lips Love help women to express their natural beauty to the world. The selection of lipsticks includes matte shades from natural and soft to bright and bold. Thousands of women liven up their looks with Lips Love products.

Animated menu items with outbound images

Power-Up: CMS List Sync

Welcome to Daily Interaction #117.

This demo showcases a menu trigger animation on hover and click.

On hover lines move in and out of the menu trigger. On click the menu trigger turns into an x and the color for the lines change as well. 

This effect was achieved by adding two div blocks inside of a menu trigger wrapper to represent the lines. Inside of those blocks another div block was add with the same background color as the browser background. When the user interacts with the menu trigger wrapper the lines move and scale to create the effect. When the user clicks the menu trigger the lines change color to be visible with the menu wrapper that appears behind it.

Inspired by: https://www.ouiwill.com/

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev For You - Daily Interaction #117

Gig Share is for those who want to share big ideas with the world. It provides secure file storage and sharing infrastructure. Sending large files safely, sharing content with coworkers or family, and fast switching between different tools is easy with Gig Share.

Discover click websites built by the Webflow community

Discover click websites built by the Webflow community