Trouble reversing an animation in React

[Winckel-dev]

Hello !

 

I'm aware this is probably an easily fixable mistake, but I'm still very new to web development, especially using gsap. Basically I have a navbar that I want to open and close with onClick() on the same button in React. I tried following multiples tutorials and forum posts, but I am still struggling to make it work like I want it to.

I'd appreciate any help, tips or answers. Thank you in advance for your time !

 

(I also don't really use codepen but I am more than willing to try and use it, if it's of use for you)

 

function Navbar() {
	const [navbarIsOpen, setNavbarIsOpen] = useState(false);

    function NavbarAnimate() {
		const tl = gsap.timeline({
			reversed: navbarIsOpen,
		})

		tl.fromTo(".navbar-link", {
			x:-400,
			opacity:0
			},{
			x:0,
			opacity:1,
			stagger:-0.02
		})

		tl.fromTo("#navbar", {
			backgroundColor: "rgb(12, 17, 23, 0.0)"
			},{
			backgroundColor: "rgb(12, 17, 23, 0.8)"
		})

		tl.reversed() ? tl.play() : tl.reverse()
    }

And here is the onClick() I use on my button :

 

<i className="..." onClick={() => {
					setNavbarIsOpen(!navbarIsOpen);
                    NavbarAnimate();
                }}/>

 

Thank you again for taking the time to check out my problem, and sorry if this is a redundant and recurring  mistake !

(Excuse my english as I'm not a native speaker)

[Cassie]

Hi!

We have a few articles here which should help you

 

 

[Winckel-dev]

Thank you ! I wasn't able to stumble upon those articles somehow ^^'