Question 190987 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Simple Framer Motion animation not working in NextJS project

In my nextjs project [v13, pages directory] I tried to add the following animation to my hero component, but for some reason I’m getting a static emoji instead of a waving animation

I'm getting a static emoji instead of a waving animation

This is my WavingHand component :

import { motion } from "framer-motion";

export default function WavingHand() {
    return (
        <motion.div
            style={{
                marginBottom: "-20px",
                marginRight: "-45px",
                paddingBottom: "20px",
                paddingRight: "45px",
                display: "inline-block",
            }}
            animate={{ rotate: 20 }}
            transition={{
                yoyo: Infinity,
                from: 0,
                duration: 0.2,
                ease: "easeInOut",
                type: "tween",
            }}
        >
            👋
        </motion.div>
    );
}

and this is my chunk of code in Hero component where I’m calling the WavingHand component which is then called in the index.js homepage:

<Typography
                    component={motion.h1}
                    variant="h1"
                    sx={{
                        fontSize: { md: "4rem", sm: "3rem", xs: "3rem" },
                        textAlign: { xs: "center", sm: "initial" },
                    }}
                >
                    Hello <WavingHand /> !
                </Typography>

Also tried wrapping the entire Typography element in a motion.div wrapper, but still it won’t animate, where am I going wrong?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Turns out yoyo:Infinity doesn't work in the current framer-motion versions, the following code works :

    <motion.div
style={{
    marginBottom: "-20px",
    marginRight: "-45px",
    paddingBottom: "20px",
    paddingRight: "45px",
    display: "inline-block",
}}
animate={{ rotate: [0, 20, 0] }}
transition={{
    duration: 1,
    ease: "easeInOut",
    repeat: Infinity,
    repeatDelay: 0,
}}
👋
</motion.div>

  2. 0

    Okay, so the rotate needs be in an array of keyframes, also the transition property should be inside animate object.

    Here’s the working snippet:

    export default function WavingHand() {
    return (
        <div
            style={{
                marginBottom: "-20px",
                marginRight: "-45px",
                paddingBottom: "20px",
                paddingRight: "45px",
                display: "inline-block",
            }}
            animate={{
                rotate: [0, 20, 0], // Add an array to specify the animation keyframes
                transition: {
                    yoyo: Infinity,
                    duration: 0.2,
                    ease: "easeInOut",
                    type: "tween",
                },
            }}
        >
            👋
        </div>
    );
}

    Here’s a breakdown:

    • Uses inline styles for defining the animation properties.
    • The animate property is an object with rotate as an array to specify keyframes for rotation.
    • The animation is set to yoyo infinitely, with a
      duration of 0.2 seconds and an easing of "easeInOut".

    Hope it helped!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search