Jump to content
Search Community

Trouble reversing an animation in React

Winckel-dev test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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", {

		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={() => {


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)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...