Framer-motion - 2 step animation

Question

Imagine i have a button, when clicking on it, a red box appears and slides to right (simplified for explanation):

const [start, setStart] = useState(false);

return (
  <>
    <button onClick={() => setStart(true)}>Animate it</button>
    {start && (
      <motion.div
        className='w-20 h-20 bg-red-500'
        initial={{ x: 0 }}
        animate={{ x: 400 }}
      />
    )}
  </>
);

But what i want is that it first scales up and then slides to right (this is what i mean by saying 2 step animation)...

Answer 1

Define Keyframes

An easy way to your question is setting keyframes for your animate props.

animate={{ x: [0, 0, 0, 400], scale: [0, 1, 1, 1] }}

Basically, I have 4 keyframes with 2 properties of x and scale :

Frame	Animation values
1 (initial frame)	x: 0; scale: 0
2	x: 0; scale: 1
3	x: 0; scale: 1
4	x: 400; scale: 1

Working demo available on Codesandbox