CODEWITHSUNDEEP
cssreactjsframer-motion
tilly
tilly

Reputation: 2610

Framer motion: move down element with animation after triggering other animation

I am wondering how to do the following scenario with Framer motion: I have a list that appears when I click on a button. The list comes in with a fade-in animation. However, the box of content below will immediately move down without an animation. What I would like to achieve is that the 'box with content' moves downwards smoothly to its new place while the list animation is going on. How can I achieve this? I have made a code sandbox to replicate the situation:

https://codesandbox.io/s/stupefied-shockley-pwxg9e?file=/src/App.js

enter image description here

Upvotes: 1

Views: 8078

Answers (1)

Joshua Wootonn
Joshua Wootonn

Reputation: 1276

Couple of things:

  1. Framer Motion lets you animate height from 0 to auto
  2. Animate Presence requires you to add a key to the items. In your case I used index

I updated your sandbox to work. 1 fixes the content reflow. 2 fixes the exit animation not working

https://codesandbox.io/s/broken-http-n8i2hk?file=/src/App.js

I did a writeup on this feature in Framer Motion, because I think it is rather undocumented. Check it out if you like: https://www.joshuawootonn.com/how-to-animate-width-and-height-with-framer-motion

Upvotes: 1

Related Questions