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

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

Headline Highlight + Display on Interaction

Headline Highlight + Display on Load/Scroll/Click

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

Click on one of the small images in the bottom right to reveal a full screen image

Click to reveal

Click to reveal an image

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

WebDev For You - Daily Interaction #132

Custom product display - Thanks for looking :-)

Bake 010

Collection 1 // Bake 010

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 IX

#10 - Login and Signup Modals

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

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

WebDev For You - Interaction #144

WebFolks

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

99ui#8 Closing modal window on the ESC button

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

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

WebDev For You - Interaction #145

Layer Move

Nice move animation

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

BudgetApp Pro

Budget App Interactions Example

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!

Button Ripple

Ripple at Mouse Click

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

WebDev For You - Daily Interaction #62

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

WebDev For You - Daily Interaction #117

Custom product display - Thanks for looking! :-)

Bake 004

Collection 1 // Bake 004

Welcome to daily interaction #82.

This demo showcases a fullscreen menu animation on click.

This one was fun! It’s mostly comprised of 3 different components inside of a menu wrapper. Those are the:

1. Image wrapper with an image inside of it
2. Blue background
3. Right wrapper with menu items inside of it

The image wrapper and right wrapper are both 50% width within the menu. I set the width of the blue background to 150% so it has a quicker animation as it scales.

By having these wrappers as separate components inside of the menu wrapper I was able to apply a scale effect to the image, a scale effect to the blue background, and animations to the menu items. The menu trigger also turns into a close icon on click, and then back to a 3 line menu trigger :).

This menu was inspired by this website here: https://adans.jp/

WebDev for You - Daily Interaction #82

WebDev For You - Daily Interaction #82

A few characters from The Office are Dwight, Jim, and Kevin, now let's build daily interaction #37!

This demo showcases a fullscreen menu with multiple sections and elements.

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

Discover click websites built by the Webflow community

Discover click websites built by the Webflow community