[Toggle Animation]

I just applied code like this and seems to work..

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false)

  const t1 = gsap.timeline({ paused: true })
  const openNav = () => {
    setIsMenuOpen(!isMenuOpen)
    animateOpenNav()
    t1.reversed(!t1.reversed())
  }
  const closeNav = () => {
    setIsMenuOpen(!isMenuOpen)
    animateCloseNav()
    t1.reversed(!t1.reversed())
  }
  const animateOpenNav = () => {
    t1.to('.navigation', {
      duration: 1.5,
      ease: 'expo.inOut',
      y: 0,
    }).reverse()
  }
  const animateCloseNav = () => {
    t1.to('.navigation', {
      duration: 1.8,
      delay: 0.1,
      ease: 'expo.inOut',
      y: '-100%',
    }).reverse()
  }

  return (
    <div className="header">
      <div className="row v-center space-between">
        <div className="logo">
          <a href="/">
            <img src={require('../assets/logo.png')} alt="MJOY" />
          </a>
        </div>
        <div
          className={`hamburger-menu ${isMenuOpen ? 'active' : ''}`}
          onClick={isMenuOpen ? closeNav : openNav}
        >
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
  )
}

 

[Toggle Animation]

Hello everyone,

I'm trying to implement the reverse() on my React project. 

The menu appears fine. However, when I click on the menu button, the reverse doesn't seem to take in effect.

Here's my code. Thank you!

 

import React, { useState } from 'react'
import { NavLink, withRouter } from 'react-router-dom'
import { gsap } from 'gsap'

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false)

  const t1 = gsap.timeline({ paused: true })
  const openNav = () => {
    setIsMenuOpen(!isMenuOpen)
    animateOpenNav()
    t1.reversed(!t1.reversed())
  }
  const animateOpenNav = () => {
    t1.to('.navigation', {
      duration: 1.5,
      delay: 0.2,
      ease: 'expo.inOut',
      y: 0,
    }).reverse()
  }

  return (
    <div className="header">
      <div className="row v-center space-between">
        <div className="logo">
          <a href="/">
            <img src={require('../assets/logo.png')} alt="MJOY" />
          </a>
        </div>
        <div
          className={`hamburger-menu ${isMenuOpen ? 'active' : ''}`}
          onClick={openNav}
        >
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
  )
}

export default Header

.navigation {
  left: 0;
  top: -1px;
  width: 100%;
  height: 100%;
  z-index: 3;
  position: absolute;
  overflow: hidden;
  background-color: $pink;
  padding-top: 240px;
  transform: translateY(-100%);

.header {
  position: fixed;
  width: 100%;
  height: 128px;
  z-index: 4;
  @include media('<=phone') {
    height: 96px;
  }
  .logo {
    img {
      width: 120px;
      height: auto;
      @include media('<=tablet') {
        width: 96px;
      }
    }
  }
  .hamburger-menu {
    box-sizing: border-box;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    position: relative;
    background-color: $pink;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s ease-in-out;
    &.active {
      background-color: $white;
    }
    cursor: pointer;
    @include media('<=phone') {
      width: 50px;
      height: 50px;
    }
    span {
      position: absolute;
      transition: 0.5s ease-in-out;
    }
    span:nth-child(1) {
      width: 24px;
      height: 2px;
      background: $white;
      border-radius: 4px;
      transform: translateY(-8px);
    }
    span:nth-child(2) {
      width: 24px;
      height: 2px;
      background: $white;
      border-radius: 4px;
      transform: translateY(0);
    }
    span:nth-child(3) {
      width: 24px;
      height: 2px;
      background: $white;
      border-radius: 4px;
      transform: translateY(8px);
    }
    &.active {
      span:nth-child(1) {
        transform: translateY(0);
        transform: rotate(-225deg);
        background: $pink;
      }
      span:nth-child(2) {
        opacity: 0;
        transform: translateY(0);
        transform: rotate(-225deg);
        background: $pink;
      }
      span:nth-child(3) {
        transform: translateY(0);
        transform: rotate(-315deg);
        background: $pink;
      }
    }
  }
}