reverse not working in react

[Guest]

I'm having trouble using the reverse(). I'm trying to create a hamburger menu that toggles. The animation works perfectly fine when opening the menu but when I try to close, it just disappears.

and sorry if the code is messed up.

import React, { useState, useRef, useEffect } from 'react'
import { Link } from 'react-router-dom'

import '../styles/navbar.css'
import '../styles/menu.css'

import gsap from 'gsap'

const Navbar = () => {

    const [isOpen, setOpen] = useState(false)

    let tl = useRef()

    let menu = useRef(null)

    let btnClose = useRef(null)
    let link1 = useRef(null)
    let link2 = useRef(null)
    let link3 = useRef(null)
    let link4 = useRef(null)


    useEffect(() => {
        tl = gsap.timeline({ paused: true })

            tl.from(menu, { top: "-100vh", opacity: 0, duration: 0.4, skewY: 5 }, '+=0')
            tl.from(btnClose, { opacity: 0, top: 20, duration: 0.4, skewY: 5 })
            tl.from([link1, link2, link3, link4], { opacity: 0, y: 50, stagger: 0.1, skewY: 2.5 })
    })

    useEffect(() => {
        isOpen ? tl.play() : tl.reverse()
    }, [isOpen, tl])

    function clickHandler() {
        setOpen(!isOpen)
    }

    return (
        <div className='navbar'>
            <div className="logo">
                <Link className='logo-icon' to='/home'>suz.</Link>
            </div>
            <div className="hamburger">

                <button className='btn-menu' onClick={clickHandler}>menu</button>

            </div>
            {isOpen &&
                <div className='menu' ref={el => menu = el}>
                    <div className='btn-close-container' ref={el => btnClose = el}>
                        <button className='btn-close' onClick={clickHandler}>close</button>
                    </div>
                    <div className="links">
                        <li ref={el => link1 = el} ><Link to='/'>Home</Link></li>
                        <li ref={el => link2 = el} ><Link to='/projects'>Projects</Link></li>
                        <li ref={el => link3 = el} ><Link to='/about'>About</Link></li>
                        <li ref={el => link4 = el} ><Link to='/contact'>Contact</Link></li>
                    </div>
                </div>
            }
        </div>
    )
}

export default Navbar

 

[elegantseagulls 1,430 Likes (Superhero)]

You forgot a deps array on the useEffect that's setting up your timeline. I'm wondering if this is causing a re-render that would break the .from animation.
 

useEffect(() => {
  tl.current = gsap.timeline({ paused: true })
    ...
}, [])

It might also be helpful to use gsap's context here as well (really helpful for garbage cleanup, and using GSAP in React's strict mode): https://greensock.com/docs/v3/GSAP/gsap.context()

 

[Guest]

Keeping [] over there throws error saying tl.play in not a function

[Rodrigo 5,098 Likes (Superhero)]

Hi @Sujxl and welcome to the GreenSock forums!

 

Please do not create duplicate threads and abide to the forums guidelines:

 

Besides the fact that you're not passing an empty dependencies array (as @elegantseagulls already noticed), you're storing your timeline in a ref so tl is a React ref object not a GSAP object, so it doesn't have a play/reverse methods. You need to access the current value in the ref:

useEffect(() => {
  isOpen ? tl.current.play() : tl.current.reverse()
}, [isOpen, tl])

Finally I'll delete the duplicated post so we can keep track of this one in order to solve your issue.

Happy Tweening!

[elegantseagulls 1,430 Likes (Superhero)]

18 minutes ago, Sujxl said:

useEffect(() => {
        isOpen ? tl.current.play() : tl.current.reverse()
    }, [isOpen, tl])

You'll want to make sure your tl.current exists here... and since it's a ref, you don't need to pass it into the deps.

 

useEffect(() => {
  if (!tl.current) return;
  isOpen ? tl.current.play() : tl.current.reverse()
}, [isOpen])

 

[elegantseagulls 1,430 Likes (Superhero)]

I'd recommend reading up on how React's lifecycles work: https://reactjs.org/docs/hooks-effect.html

and also this could be very useful as well: