Why my navbar is stopping in the middle in react but not in normal javascript?

[Xenex122]

I don't know what kind of bugs happening here but I don't see any difference that make the navbar stops and not.

So basically the problem is that in a react my sidebar closing is giving me a bug and stopping while it is still not complete.
It supposed to be in height: 0vh and 100vh when reversing the animation through my menu button but it is not working properly.. In a normal javascipt it is working heres the codepen

You can see the difference already once to try to click the menu

and heres for the reactjs 
https://codesandbox.io/s/sad-leftpad-8cb6lv?file=/src/App.js

 

        const tl = gsap.timeline()
        const navAnim = tl.to(navbar,{
            height:"100vh",
            duration:2,
            ease:"power2.easeOut",
        })
        navAnim.reversed(true)

        function s(e) {
            navAnim.reversed(!navAnim.reversed())
        }

        
        open.addEventListener("mouseup",s)
        close.addEventListener("mousedown",s)    
        
        open.addEventListener("click",() => {
            close.style.opacity = "0";
            open.style.opacity = "1";
            open.style.zIndex = "0"
        })

        close.addEventListener("click",() => {
            open.style.opacity = "0";
            close.style.opacity = "1";
            open.style.zIndex = "1"
        })

You can see it here in there lines at the useEffect and the normal javascript..where the reactjs stops without making the animation done from 100vh to 0vh

Anyone can help me through this?

See the Pen ZErmgWm by myth-vince (@myth-vince) on CodePen

[GreenSock]

Just set reversed: true in the initial timeline you create:

const tl = gsap.timeline({ reversed: false });

Also, there's no such ease as "power2.easeOut" - I assume you meant "power2.out" which can be simplified to "power2" (".out" is the default type)

 

I'm not sure why you're creating a separate "navAnim" constant - that is identical to the "tl" constant. Remember, the timeline methods like .to(), .from(), .fromTo(), etc. all return the timeline instance for easy chaining. 

[Xenex122]

Oh I'm trying to add it with the other animation..does it not allow to do that?
You can see it here 
 

        allHides.forEach((elem,i) => {
            elem.children[0].innerHTML = elem.children[0].textContent.replace(/\S/g, "<span class='letter'>$&</span>");
            // console.log(elem.children[0].children)
            navAnim.to(elem.children[0].children,{
                y:'0',
                ease:"circ.out",
                stagger:0.02,
                duration:0.02,
            })
        })

 

[GreenSock]

It's fine to add other animation, sure. Maybe I'm misunderstanding your question. 🤷‍♂️