sun9woo

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> ) }

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; } } } }