Jump to content

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


  • Posts

  • Joined

  • Last visited

Posts posted by jemima

  1. On 8/26/2020 at 4:55 AM, ZachSaucier said:

    Hey jemima and welcome to the GreenSock forums.


    I recommend first building the part that just shows and hides the menu (further down the page) first. Then worry about adding on the part to transition between states at the top of the page.


    If you scroll down then slowly back up you'll notice that the nav is revealed at the same rate as the scroll. Once the nav is fully revealed it's pinned to the top. Same sort of thing with scrolling down to hide it.


    As for the effect at the top, once the scroll position is 0 it has a slight delay and then animates the background and position of the text (or height of nav if you prefer). If the user scrolls past the nav height then it sets the background color and text position to what it needs to be.


    Hopefully that description will help you get things implemented in code :) 

    Hey @ZachSaucier thanks for the suggestions :)

    I was hoping to get like a TweenMax oriented solution to the problem instead of having to detect the scrolling position with the custom code above. I've seen something about using Timeline to control the progress of the animation so if there was a native way to tie the progress from 0 to 100% based on the scrolling, for example.


    Any help appreciated, thanks again :D

  2. I'm trying to create a 'sticky' menu that appears after a certain breakpoint and scrolls according to the user scrolling.

    Basically, when you first start scrolling on the page, the  menu should disappear relatively with the page (scroll up normally) but after a breakpoint has been reached, the menu should slide down according to how the user is scrolling.

    An example of the animation is the menu on the videinfra.com site. The menu translates according to the same number of px that the user scrolls up.


    I'm currently setting the menu's position to relative before the breakpoint and once the breakpoint has been reached, I set the position to sticky and translate according to the user scroll, using the code here:

    const transitionTo = isScrollDown
            ? Math.min(
                currentTranslateLocation + scrollDiff,
            : Math.max(
                currentTranslateLocation + scrollDiff,
          TweenMax.to(navigationClassname, 0.5, { y: transitionTo });


    The problem is the scrolling looks more... animated than the example in the site above, I'd really like to achieve the smooth natural scrolling as shown there.

    Also, when the page scrolls really fast, the menu tends to glitch but I can't figure out how to stop that.


    Alternatively, if there's another method to achieve this instead of using TweenMax, I'd be glad to implement that instead.

    See the Pen wvGJyOM?editors=0010 by Jemimaabu (@Jemimaabu) on CodePen