Direction in `framer-motion`-CodePudding

How we can reverse direction of framer-motion implemented animation?

This is My Component, and This change background of box element from #000 to #ff0 :

import React from 'react';
import { motion } from 'framer-motion';
import type { Variants } from 'framer-motion';

const variants: Variants = {
    initial: { background: '#000' },
    animate: { background: '#ff0' },
};

export function Box(props: Props = { isMenuActive: false }) {
    return (
        <motion.div initial='initial' animate='animate' variants={variants}>
            Hi
        </motion.div>
    );
}

type Props = {
    isMenuActive: boolean;
};

BUT

direction of this animation is from initial to animate namespace, but i want if props.isMenuActive was true, then, animation execute from animate to initial namespace, exactly direction of animation reversed.

Example

In anime.js library, we can use this snippets to reverse direction : documention of anime.js

NOTE : anime.js didn't support jsx and react

CodePudding user response：

am not sure if framer-motion has a reverse function but you can do it yourself with this logic:

 initial: { background: isMenuActive ? '#000' : '#ff0' },
    animate: { background: isMenuActive ? '#ff0' : '#000' },