11ali

i write this component in Next.js 13. export default function MenuButton({ menuState, setMenuState }) { const lineOne = useRef(null) const linetwo = useRef(null) const lineOneAnimation = gsap.timeline({ paused: true, yoyo: true }) .to(lineOne.current, { rotation: "300" }) .to(lineOne.current, { rotation: "225"}); useEffect(() => { if (menuState) { lineOneAnimation.play(); } else { lineOneAnimation.reverse(); } }, [menuState]); return ( <div className="header__menu-btn" onClick={() => setMenuState(!menuState)}> <span className="header__menu-btn-line" ref={lineOne}></span> <span className="header__menu-btn-line" ref={linetwo}></span> </div> ) } i wanna rotate lineOne to 225 and when menuState is false, rotate to default state. play() works but reverse() doesn't . Does anyone know where the problem is?