GSAP - reverse() 不返回动画

Question

The animation works when it is played but does not work when I use reverse() function

It's demo https://codesandbox.io/s/gatsby-express-9uqi7 Navbar component

const [state, setState] = useState(false);
    const menuManage = (e)=> {
        if(!e.target.classList.contains('select')){
            const wrapper = document.querySelector('.wrapper');
            const tl = new TimelineMax({paused: true})
                .to(wrapper, 0.15, {height: '100vh', width: '100vw', left:0})
                .to(wrapper, 0.15, {borderBottomLeftRadius: '0%'});
            if(state){
                tl.reverse();
                setState(false);
            }
            else{
                tl.play();
                setState(true);
            }
        }
    }

Answer 1

I'm guessing that this is because the timeline's playhead is at the beginning of the timeline when you're calling .reverse() . Try tl.progress(1).reverse(); instead. Without a demo, it's impossible to tell if this is the issue.

Answer 2

I finished my problem in this way

const [state, setState] = useState(false);
    const menuManage = (e)=> {
        if(!e.target.classList.contains('select')){
            const wrapper = document.querySelector('.wrapper');
            const tl = new TimelineMax({paused: true})
                .to(wrapper, 0.15, {height: '100vh', width: '100vw', left:0})
                .to(wrapper, 0.15, {borderBottomLeftRadius: '0%'});
            if(!wrapper.animation) wrapper.animation = tl;
            state ? wrapper.animation.progress(1).reverse() : wrapper.animation.play();
            setState(!state);
        }
    }

Each time when i click i overwrote timeline in old code.