Radius on dropdown + element interaction on mouse movement

Hi everyone.

Quite new to Webflow, but I’m slowly trying to understand the different interaction and animation elements as I go along.

I’m a little stuck with the radius on a dropdown menu I made from a Webflow tutorial. It creates “a cut” into the dropdown, probably because it’s not a single element. See attached picture.

Screenshot 2020-05-26 at 10.22.50

Another thing I’m having trouble with is finding a tutorial on achieving the same result as the iPhone and text element on this site: https://www.krause.studio/ It moves based on the mouse movement on the page. It might not be a part of the Webflow interactions/animations?
I would love my logo to have this interaction.

Cheers guys,
Alex.


Here is my public share link: LINK
(how to access public share link)

You could create a custom dropdown using interactions that only uses one element. One way to do this is to create a div with all the contents you want in it, then create a mouse tap interaction. In the initial state, set the height to a set height, like 50px, or however big it needs to be to only show the “Select” text. Then you set the animation on tap to be Height: auto

This video is from the old UI but you’ll still be able to follow.

2 Likes

Thanks for the reply @danielclydesdale. It’s actually the exact video I used for the first dropdown.

I’ve tried creating a div block with all the content and created the animation for the height. However I can’t get it to “hide” the content. What am I doing wrong?

Read-only link

You need to set Overflow to hidden and that will hide anything outside of the div. It’s in the size section of the style tab.

2 Likes

Should mention overflow hidden need to be applied to your dropdown-wrapper class.

Works like a charm. Cheers mate!

1 Like