card background pattern
Level 2

Animating React with Framer Motion

Unlock Full Course

$49.99 $39.99



Project 2Accordion & Height Auto

In this video, we will build an animated accordion so that we can learn how to animate on height: auto.



updated about 2 months ago

@wsz The animated blocks position is basically a movement delay(instead of an instant position move) but the text container overflow takes over before this animation has finished as that space is "available" and visible and the text is behind the card. However, if you set overflow: hidden you can see how the text appears as soon as the animation is complete(or when the content is actually set to be displayed). Hope this helps

3 months ago

hello! why did setting overflow: hidden work to eliminate the jump in the accordion?

Something to say?

Become a Pro