CODEWITHSUNDEEP
reactjsframer-motion
mikoloism
mikoloism

Reputation: 148

Direction in `framer-motion`

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

Upvotes: 1

Views: 1359

Answers (1)

Y U K I M U R A
Y U K I M U R A

Reputation: 537

am not sure whether 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' },

Upvotes: 2

Related Questions