CODEWITHSUNDEEP
next.jsframer-motion
Wael Manai
Wael Manai

Reputation: 33

Framer motion start animation after another animation end

how can I start animation after another animation end with framer motion

<motion.div
   variants={variants1}
   initial="hidden"
   animate={controls} 
   ref={element} 
>
   Start animation one             
</motion.div>


<motion.div
   variants={variants2}
   initial="hidden"
   animate={controls} 
   ref={element} 
>
   Start animation Two
</motion.div>

Upvotes: 3

Views: 7374

Answers (1)

djsdev
djsdev

Reputation: 136

You can use the staggerChildren transition property of framer-motion to delay each child's animation. So this way the N child's animation will start after the N - 1 child's animation.

import { motion, Variants } from "framer-motion";
import "./styles.css";

/**
   * Here we are defining @param staggerChildren with 1sec.
   * You can change this time as per your need.
   * 1st child will not get delayed. Delay starts from 2nd child onwards.
   * 2nd child animation will start after: 1sec
   * 3rd child animation will start after: 2sec
   * 4th child animation will start after: 3sec
   * and so on...
   */
const parentVariant: Variants = {
  initial: { opacity: 0 },
  animate: { opacity: 1, transition: { staggerChildren: 1 } }
};

const childrenVariant: Variants = {
  initial: { opacity: 0, x: 50 },
  animate: { opacity: 1, x: 0 }
};

export default function App() {
  return (
    <div className="App">
      <motion.div initial="initial" animate="animate" variants={parentVariant}>
        <motion.div className="child" variants={childrenVariant}>
          Start animation One
        </motion.div>
        <motion.div className="child" variants={childrenVariant}>
          Start animation Two
        </motion.div>
        <motion.div className="child" variants={childrenVariant}>
          Start animation Three
        </motion.div>
        <motion.div className="child" variants={childrenVariant}>
          Start animation Four
        </motion.div>
      </motion.div>
    </div>
  );
}

Note that we are not defining initial and animate labels for children because these labels can flow from parent to child, hence they will be inherited automatically by the children.

Here is a CodeSandbox example: https://codesandbox.io/embed/framer-motion-staggerchildren-nxfrnb?fontsize=14&hidenavigation=1&theme=dark

Upvotes: 5

Related Questions