Jump to content
GreenSock

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

Scroll Bound Animation after trigger point

Recommended Posts

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,
            VISIBLE_NAVIGATION_POSITION
          )
        : Math.max(
            currentTranslateLocation + scrollDiff,
            INVISIBLE_NAVIGATION_POSITION
          );
      
      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

Link to post
Share on other sites

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

Link to post
Share on other sites
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

Link to post
Share on other sites
7 hours ago, jemima said:

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.

Sure, but that's a completely different question. Look into ScrollTrigger to do that.

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.

×