Framer Motion different Animations for different properties

Question

I am trying to animate an animation in framer motion using Chakra-ui and Gatsby whereby there is rotation and movement and opacity change.

At the moment the animation works as I intend on the movement on the x axis and rotation using type:spring however the 'bounce effect' also affects the opacity.

I have tried to explicitly define the type:tween for the opacity property, but this has no effect with the opacity of the object still 'bouncing' too. Here is my code:

const Rocketship = ({ top, right, bottom, left, opacity }) => {
        const RocketAnim = motion(Box)
        const transition = {
                default: {
                        type: 'spring',
                        damping: 5,
                },
                opacity: { type: 'tween' },
        }

        return (
                <RocketAnim
                        layoutId="rocketship"
                        initial={{ rotate: 25, x: -100, opacity: 0 }}
                        animate={{ rotate: 45, x: 0, opacity }}
                        whileHover={{ width: '170px', cursor: 'pointer' }}
                        transition={transition}
                        pos="fixed"
                        width={150}
                        top={top}
                        right={right}
                        bottom={bottom}
                        left={left}
...

I would be grateful for any advice

Answer 1

Don't have a complete answer because there isn't enough context, but

1. Your RocketAnim should be defined outside of the component since you don't need it recreated ever render
2. You don't have to make it a tween, I would keep it as a spring (the default value) and just set bounce to 0

opacity: { bounce: 0}

3. If you keep it as a tween, I would try adding a duration to trouble shoot the bouncing.