CODEWITHSUNDEEP
javascriptcssframer-motion
Shahriar
Shahriar

Reputation: 2380

Framer Motion opacity keyframe only animates on initial render

I'm using Framer Motion

The box should go from opacity: 0 to 1 and increase in height on every state toggle. However, the height is different based on the condition.

I don't have a clue why "height" is being animated every time - correctly, but "opacity" is only animated in the first render.

I tried [0, 1, 0] & [1, 0, 1] too, but none of them has the desired effect.
I even tried [0, 1, 0.5] to test better, but it stays at 0.5.

Code

https://codesandbox.io/s/angry-raman-bc9sf?file=/src/App.js

import { motion } from "framer-motion";
import { useState } from "react";

export default function App({ href = "#", label, icon, notifCount }) {
  const [conditionIsMet, setConditionIsMet] = useState(false);

  const notifVariants = {
    conditionA: {
      opacity: [0, 1],
      height: ["40px", "90px"]
    },

    conditionB: {
      opacity: [0, 1],
      height: ["40px", "200px"]
    }
  };

  return (
    <>
      {`Condition is ${conditionIsMet ? "A" : "B"}`}
      <button onClick={() => setConditionIsMet(!conditionIsMet)} />
      <motion.span
        animate={conditionIsMet ? "conditionA" : "conditionB"}
        variants={notifVariants}
      />
    </>
  );
}

Upvotes: 0

Views: 2653

Answers (1)

Arian Hamdi
Arian Hamdi

Reputation: 125

I think it's a bug but as a temporary fix you can use opacity: [0, 1.01] for conditionB. please open an issue for this bug.

Upvotes: 1

Related Questions