card background pattern
Level 2

Animating React with Framer Motion

Unlock Full Course

$49.99 $39.99

Or

$24.99/Month

Project 2Accordion & Height Auto

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

Downloads

Comments

Raul
Admin
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

wsz
3 months ago

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

Something to say?

Become a Pro