How can i make a child animation happen every time the parent animation is beginning using framer motion & react

I’m trying to make a squeezing bubble animation on repeat, using framer motion & react, but I cant make the squeeze animation happen every time the movement animation is beginning.

instead only the first time the animations run it works but after that only the movement animation repeats itself, if I try to repeat the squeeze animation it just gets out of order

import React from "react";
import styled from "styled-components";
import { motion } from "framer-motion";

const Bubble = () => {
  const shapeVariants = {
    hidden: {
      height: 450,
      width: 50,
    },
    visible: {
      height: 250,
      width: 250,
      transition: {
        type: "spring",
        bounce: 1,
        stiffness: 700,
        ease: "easeIn",
      },
    },
  };
  const MoveVariants = {
    hidden: {
      y: 1300,
    },
    visible: {
      y: -280,
      transition: {
        duration: 2,
        ease: "easeIn",
        repeat: Infinity,
      },
    },
  };

  return (
    <motion.div variants={MoveVariants} initial={"hidden"} animate={"visible"}>
      <RoundDiv
        onAnimationComplete={(definition) => console.log(definition)}
        variants={shapeVariants}
      />
    </motion.div>
  );
};

const RoundDiv = styled(motion.div)`
  height: 250px;
  width: 250px;
  background-color: #05386b;
  border-radius: 50%;
`;

export default Bubble;

Source: Ask Javascript Questions

LEAVE A COMMENT