Framer Motion Animate Presence vertically inline - reactjs

Question

I am trying to display a count where when a digit changes the original digit exits downwards and the new digit comes in from the top. When I try to do this, the numbers appear side by side briefly. I have tried using position absolute but then the digits don't exit downwards.
Here is a codesandbox showing the issue I am having.
Thanks!

Answer 1

You need to wrap your motion.divs in a container so the width doesn't change on the animation. Then give the container position relative and a fixed width and every motion.div a position absolute and for each motion.div higher left px.
<div className="myComponent">
<div className="counts-container">
<AnimatePresence>
{counts.map((count, index) => (
<motion.div
key={index + Math.random()}
className={`count count-${index}`}
animate={{ y: 0 }}
initial={{ y: -50 }}
exit={{ y: 50 }}
transition={{ duration: 0.5 }}
>
{count}
</motion.div>
))}
</AnimatePresence>
</div>
<button onClick={() => setCounts((c) => [...c].reverse())}>
Change Counts
</button>
</div>
your css:
body {
margin: 0;
padding: 0;
}
#root {
font-family: sans-serif;
text-align: center;
width: 100vw;
height: 100vh;
display: flex;
place-content: center;
place-items: center;
background: rgba(0, 85, 255, 1);
margin: 0;
padding: 0;
}
.myComponent {
display: flex;
}
.counts-container {
display: flex;
position: relative;
width: 40px;
background-color: yellow;
}
.count {
position: absolute;
}
.count-0 {
left: 0px;
}
.count-1 {
left: 15px;
}
.count-2 {
left: 30px;
}
MIGHT NOT BE THE BEST SOLUTION BUT IT IS A SOLUTION! :D