Hi,
i am just getting to know gsap and i have a little problem :/.
I am writting a page in gatsby and made a mobile side menu with gsap but i noticed that when the menu is opened for the first time and closed, after resizing the window, the menu doesn't change its position on the x-axis and starts sticking out.
const Header = () => {
const [isOpen, setIsOpen] = useState(false)
const menuRef = useRef(null)
const menuBtn = useRef(null)
const tl = useRef()
const toggleOpen = () => {
setIsOpen(!isOpen)
}
useEffect(() => {
const nav = menuRef.current
const mainMenuLists = [...nav.querySelectorAll("ul:nth-of-type(1) li")]
const socialLists = [...nav.querySelectorAll("ul:nth-of-type(2) li")]
const btn = menuBtn.current
const upLine = btn.querySelector("span:nth-of-type(1)")
const centerLine = btn.querySelector("span:nth-of-type(2)")
const downLine = btn.querySelector("span:nth-of-type(3)")
tl.current = gsap
.timeline()
.to([upLine, downLine], { y: "-50%", duration: 0.3 })
.to(upLine, { duration: 0.1, rotation: 45 }, 0.2)
.to(downLine, { duration: 0.1, rotation: -45 }, 0.2)
.to(centerLine, { duration: 0.1, autoAlpha: 0 }, 0.2)
.to(nav, { x: "0", duration: 0.5, autoAlpha: 1 })
.staggerFromTo(
mainMenuLists,
1,
{ x: "-=15px", autoAlpha: 0 },
{ x: "0", autoAlpha: 1 },
0.2
)
.staggerFromTo(
socialLists,
0.5,
{ y: "+=3px", autoAlpha: 0 },
{ y: "0", autoAlpha: 1 },
0.1
)
.reverse()
}, [])
useEffect(() => {
tl.current.reversed(!isOpen)
}, [isOpen])
return (
<HeaderComponent>
<Logo>
<AniLink path="/" hex="#333">
<LogoImg />
</AniLink>
</Logo>
<OpenMenuBtn ref={menuBtn} onClick={toggleOpen}>
<span />
<span />
<span />
</OpenMenuBtn>
<Nav menuRef={menuRef} setIsOpen={setIsOpen} />
</HeaderComponent>
)
}
const Nav = styled.nav`
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
transform: translateX(100%);
background-color: #ccc;
z-index: 99;
`
const Navigation = ({ setIsOpen, menuRef}) => {
return (
<Nav ref={menuRef} onClick={() => setIsOpen(false)}>
...
</Nav>
)
}
I think i know what the problem is.
Timeline is created when the component is mounted and the first time the menu is opened it pops up getting translate (0). When I close the menu, the animation returns back and gsap assigns to the translate (x), value from the start of the animation.
because the animation is set to reverse (I know it's obvious) .
I wonder if there is any possibility to change the value of position x only when the animation returns?(Because I can't/ i don't know how do this animation differently: D)
https://ibb.co/f8Y0Tg5
short demo