Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Dawid

Toggle navigation resize issue

Recommended Posts

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

Przechwytywanie.JPG.bf6b1a5d0c4985c3231774493c4a5e15.JPG

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

Link to post
Share on other sites

A simple way might be to animate left value 100% to 0%. Instead of a transform. We usually recommend transforms as they are more performant but in your case the animation is simple enough it may work fine just with left movement.

 

Another way would be to add a screen resize event listener and reset the x value and/or timeline accordingly.

 

If you are able to make a codepen of it we may be able to assist more effectively.

  • Like 2
Link to post
Share on other sites
58 minutes ago, Visual-Q said:

A simple way might be to animate left value 100% to 0%. Instead of a transform. We usually recommend transforms as they are more performant but in your case the animation is simple enough it may work fine just with left movement.

 

Another way would be to add a screen resize event listener and reset the x value and/or timeline accordingly.

 

If you are able to make a codepen of it we may be able to assist more effectively.

 

 

I tried quickly with 'left' but the effect was the same. 

Tomorrow I will try to prepare a codepen

Link to post
Share on other sites
12 hours ago, Visual-Q said:

A simple way might be to animate left value 100% to 0%. Instead of a transform. We usually recommend transforms as they are more performant but in your case the animation is simple enough it may work fine just with left movement.

 

Another way would be to add a screen resize event listener and reset the x value and/or timeline accordingly.

 

If you are able to make a codepen of it we may be able to assist more effectively.

See the Pen vYKYbPm by breeg554 (@breeg554) on CodePen

here is codepen of this problem. When you open and close menu and next resize window to bigger, the menu starts sticking out. 

I tried with 'left'  as you advised

image.png

Link to post
Share on other sites

Hey @Dawid,

 

Position the nav 'absolute' and use the percentage-based translation xPercent and yPercent:

 

See the Pen oNLNVJE by mikeK (@mikeK) on CodePen

 

Happy transforming ...

Mikel

 

  • Like 3
Link to post
Share on other sites
3 hours ago, mikel said:

Hey @Dawid,

 

Position the nav 'absolute' and use the percentage-based translation xPercent and yPercent:

 

 

 

 

Happy transforming ...

Mikel

 

Thank you so much ;) 

Link to post
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.

×