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.
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