Hello, newbie on Webflow here.
How would you go about achieving the animation features on this website? Website Specifically the one where the panels expand and close (with the “Lived Experience” “Systems Changed” etc. headings)? I’ve tried using transitions on hover, interactions, and nothing seems to work as smoothly as this site has it.
Any advice/guidance would be greatly appreciated!
Hi @pearlastrid7
Welcome to the community. That website is made in Webflow. This would be created with an interaction on hover.
Each panel is a div. When a mouse hovers over the div, it expands to 100% of the width of it’s parent. After it has expanded, the hidden content changes from display none to display flex and then opacity 0% to 100%. I imagine they’re using some form of easing too.
Start by designing your panels in their opened state, then display none any content you want to be hidden and set to the desired size. After that you can create your interaction.