CODEWITHSUNDEEP
cssreactjsframer-motion
Dwix
Dwix

Reputation: 1257

React Framer Motion in-between color transition

I'm using framer-motion to animate an Icon component when hovered as follow :

<Icon
    initial={{ scale: 1, color: "#B9BBBE" }}
    whileHover={{
        scale: 1.15,
        color: "#FFCC4D",
    }}
    transition={{ type: "spring", stiffness: 500 }}
>
    <Emoji />
</Icon>

The Icon contains a simple SVG Emoji with a grey color #B9BBBE, and I also use this color in the initial prop.

I need the transition to go from that to the yellow #FFCC4D, but when I move out of the icon, it transitions back from the yellow to a shade of blue and then the initial grey color.

I can't figure out how to transition from yellow directly to the grey, without any weird colors in between.

I also tried to pass an array as follow, but still got the same result :

whileHover={{
    scale: 1.15,
    color: ["#B9BBBE", "#FFCC4D"],
}}

Upvotes: 1

Views: 2924

Answers (1)

Danila
Danila

Reputation: 18526

I guess stiffness creates this color "bounce":

A spring’s Stiffness determines the spring's velocity and how many times the spring will bounce before the spring settles and the animation ends.

So you need apply spring and stiffness only for scale property for bounce effect, and leave color as is:

      <motion.div
        style={{ height: 100, width: 100 }}
        initial={{ scale: 1, backgroundColor: '#B9BBBE' }}
        whileHover={{
          scale: 1.15,
          backgroundColor: '#FFCC4D'
        }}
        transition={{ scale: { type: 'spring', stiffness: 500 } }}
      ></motion.div>

Codesandbox

Upvotes: 2

Related Questions