Framer Motion cannot animate rotateZ property

Question

I am using variants (Framer motion) to animate a component from initial to animate state in React, and one of the animated properties include rotateZ property, which does not animate at all. All others properties (opacity and x) animate. Can anyone tell me what's my mistake?

Variant

const variants = {
    initial: {
        opacity: 0,
        x: -50,
        rotateZ: "-60deg",
        backgroundColor: Colors.greenPrimary
    },
    animate: {
        opacity: 1,
        x: 0,
        rotateZ: "0deg",
        transition: {
            ease: easeInOutCubicBezier,
            delay: 2.8,
            duration: 1
        }
    }
}

Animation (I need this because I use animation for more animations later.)

useEffect(() => {
        animation.start("animate")
    }, [animation])

Element

<motion.div variants={variants} animate={animation} whileTap="whileTap" initial="initial" onClick={toggleMenuHandler}>
...
</motion.div>

Can you show your `animate` variable? Also I think your `animate={animation}` should be `animate="animate"` if you're trying to achieve the variants.animate animations. — crevulus, Aug 22 '21 at 15:29
@crevulus My `animation` variable looks like: `const animation = useAnimation()`. Also, the reason I am using the `useAnimation` hook is because I am using it to coordinate animations with other components (those are working fine, as expected). — Sohail Saha, Aug 22 '21 at 15:51
hmm... I'm quite new to Framer, so this may not fix it. But I do know that the string you pass to `animate` and `initial` should be the names of objects within your `variants` object. I don't think you can pass a var in there. Also try rotateZ(0) instead of using degree values. — crevulus, Aug 23 '21 at 12:13
@crevulus You can pass 'animation' variables to the animate prop. Google for the `useAnimation` hook. Super useful! — Sohail Saha, Aug 23 '21 at 16:42
It works fine in a bare-bones sandbox: https://codesandbox.io/s/muddy-sunset-q8gbd?file=/src/App.js. You must be doing something elsewhere to prevent or override the animation. When you say "it does not animate", is it stuck at the initial value or does it skip straight to 0deg? — Cadin, Aug 23 '21 at 17:44
So the initial value isn't being set or is being overridden by something else in your code. You'll have to track that down. What you're showing here works fine, as you can see in the sandbox I posted. — Cadin, Aug 24 '21 at 17:51

Framer Motion cannot animate rotateZ property

0 Answers0