I have a project with nextjs and using framer motion to animate my menu when i click on a link to navigate on a new route about, contact etc.. I want the menu to close to give the smooth feeling on navigating to a different route
when I was using gsap I used to reverse the animation based on the isActive
is there is a way to achieve the same with framer motion ?
i just want the menu to close while navigating to a new route and that’s it
<code> useEffect(() => {
if(isActive) {
tl.current.play()
} else {
tl.current.reverse()
}
}, [isActive])
</code>
<code> useEffect(() => {
if(isActive) {
tl.current.play()
} else {
tl.current.reverse()
}
}, [isActive])
</code>
useEffect(() => {
if(isActive) {
tl.current.play()
} else {
tl.current.reverse()
}
}, [isActive])
and here is my current code
<code>'use client';
import { Content } from '@prismicio/client';
import { useEffect, useState } from 'react';
import { AnimatePresence } from 'framer-motion';
import Hamburger from './hamburger';
import Nav from './nav';
type NavProps = {
nav: Content.NavDocument;
};
const Menu = ({ nav }: NavProps) => {
const [isActive, setIsActive] = useState(false);
return (
<>
<Hamburger isActive={isActive} setIsActive={setIsActive} />
<AnimatePresence mode='wait'>{isActive && <Nav nav={nav} />}</AnimatePresence>
</>
);
};
export default Menu;
</code>
<code>'use client';
import { Content } from '@prismicio/client';
import { useEffect, useState } from 'react';
import { AnimatePresence } from 'framer-motion';
import Hamburger from './hamburger';
import Nav from './nav';
type NavProps = {
nav: Content.NavDocument;
};
const Menu = ({ nav }: NavProps) => {
const [isActive, setIsActive] = useState(false);
return (
<>
<Hamburger isActive={isActive} setIsActive={setIsActive} />
<AnimatePresence mode='wait'>{isActive && <Nav nav={nav} />}</AnimatePresence>
</>
);
};
export default Menu;
</code>
'use client';
import { Content } from '@prismicio/client';
import { useEffect, useState } from 'react';
import { AnimatePresence } from 'framer-motion';
import Hamburger from './hamburger';
import Nav from './nav';
type NavProps = {
nav: Content.NavDocument;
};
const Menu = ({ nav }: NavProps) => {
const [isActive, setIsActive] = useState(false);
return (
<>
<Hamburger isActive={isActive} setIsActive={setIsActive} />
<AnimatePresence mode='wait'>{isActive && <Nav nav={nav} />}</AnimatePresence>
</>
);
};
export default Menu;