Hello, I have 3 simple menu bars i am animating but id like to now reverse, i know about reverse() but i cant seem to implement it correctly.
const [state, setState] = useState({
active: null
})
const handleClick = () => {
setState({
active: !state.active
})
}
let bar1, bar2, bar3 = useRef(null)
useEffect(()=>{
if(state.active === true){
gsap.to(bar1, 0.4, { x: "+=80px", y: "-=80px", delay: 0.1, ease: Power4.easeIn })
gsap.to(bar2, 0.4, { x: "+=80px", y: "-=80px", ease: Power4.easeIn})
gsap.to(bar3, 0.4, { x: "+=80px", y: "-=80px", delay: 0.2, ease: Power4.easeIn})
}else if (state.active.reversed()){
gsap.to(bar1, 0.4, { x: "+=80px", y: "-=80px", delay: 0.1, ease: Power4.easeIn }).reverse()
gsap.to(bar2, 0.4, { x: "+=80px", y: "-=80px", ease: Power4.easeIn}).reverse()
gsap.to(bar3, 0.4, { x: "+=80px", y: "-=80px", delay: 0.2, ease: Power4.easeIn}).reverse()
}
})
Help needed!
https://codesandbox.io/s/musing-christian-ncvot?file=/src/components/atom/Menu.js