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,

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.


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.


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

Works like a charm. Cheers mate!

1 Like