Jump to content
Search Community

Why scrolling down faster than scrolling up with GSAP?

Riccardo1091 test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

I'm new to GSAP and JS in general, I'm having some problems figuring out why I have two different speeds while scrolling up and down.
It seems like scrolling up triggers the animation without adding the actual scroll amount and that's ok, on the other hand you can scroll down ignoring the animation completely just by keep scrolling, I need a way to prevent the actual scroll movement and leave just the trigger.

There's also a problem once it scrolls all the way up that automatically reverse the animation, I guess it's because it's beyond the limit, why does this happen?

The objective is catching the down scroll event and make the second div go to the top of the page while the first stays fixed below and viceversa.
 

I tried looking at the most common GSAP mistakes but maybe there's something I'm not seeing
Hope u can help, thanks

 

See the Pen rNdedwa by Mahanon (@Mahanon) on CodePen

Link to comment
Share on other sites

Yes, because your animation is totally changing the height of the page. Also, you're animating the trigger on the y axis which is generally a very bad idea because that would alter the start/end values constantly throughout the animation. It's always better to put it into a container that you use as the trigger, and then animate the element itself. 

 

I'm having a very difficult time understanding the effect you're after, but perhaps this?

See the Pen KKozeEx?editors=1010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

I understand what you're saying but now I have a very long scrolling on the red div.

Let me explain the goal using other words:
I have two divs with 100vh, #top is fixed to the top of the page, #bottom is right below the window with position relative and top: 100vh.

When the user scroll down I need to disable the actual scrolling and simulate the movement by removing 100vh to the "top" property of the #bottom element thus overlapping it on the #top div

When the user scroll up I need to disable the scrolling function and add 100vh to the "top" property of the #bottom again, basically I need to go back the initial position


Hope it helps 

Link to comment
Share on other sites

What I don't understand is "...I need to disable the scrolling function...". Let's say the scrollbar has 800px of room to drag up/down initially. So the user starts scrolling down...are you saying the scrollbar suddenly STOPS while the element moves up? Like...the user literally is forced not to be able to scroll at all (no dragging the scrollbar, mouse wheeling, etc.)? 

 

Are you expecting the 800px of scroll space to gradually CHANGE during this animation so that it becomes 0px (no scrollbar)? This seems very confusing as a user. 

 

I provided a demo that keeps the scrollbar consistent (no shortening/lengthening the scroll area) - is that not what you wanted? 

 

If you still need help, please fork my CodePen and provide your attempt with the knowledge gained here and we'd be happy to help with any GSAP-specific questions you get stuck on. 

Link to comment
Share on other sites

I just need the scroll trigger, not the actual scroll.
As you can see, when I scroll down on the mousewheel it overwrites partially the animation on the top property of the red div, that's the problem.

The example you provided makes the red div higher than 100vh, I need both divs to be perfectly 100vh, the red one sliding onto the first one on scroll and viceversa, no extra space.

Is there a way to make it work with overflow:hidden on the body? When the red div is on top there's no scrollbar and the following animation scrolling up on the mousewheel works fine

Link to comment
Share on other sites

9 hours ago, Riccardo1091 said:

As you can see, when I scroll down on the mousewheel it overwrites partially the animation on the top property of the red div, that's the problem.

Sorry, I don't understand what you mean by "overwrites partially the animation..."

 

Your demo is literally changing the amount of available scroll area which of course can force the scroll position backwards. Let's say height of all the content is 1000px (viewport is 500px tall). So we've got a total of 500px available to scroll. Then you start scrolling down and it triggers the bottom element to animate its "top" to 0 (from 100vh) when there is even 1px if scroll (because you set start: "top bottom"). When that animation ends, there is literally 0 total scrollable area because ALL of your content only takes up 500px (the viewport height), so now that the scroll position is forced to 0 (the browser cannot scroll beyond where there is content), it triggers the onLeaveBack of that ScrollTrigger. 

 

So it's a logic issue in the way you've set things up (if I understand your question correctly). 

 

And again, it would lead to the scrollbar totally changing its height during the animation...and then disappearing which feels pretty weird as a user. 

 

Does that clarify things at all? 

Link to comment
Share on other sites

58 minutes ago, GreenSock said:

Sorry, I don't understand what you mean by "overwrites partially the animation..."

 

Your demo is literally changing the amount of available scroll area which of course can force the scroll position backwards. Let's say height of all the content is 1000px (viewport is 500px tall). So we've got a total of 500px available to scroll. Then you start scrolling down and it triggers the bottom element to animate its "top" to 0 (from 100vh) when there is even 1px if scroll (because you set start: "top bottom"). When that animation ends, there is literally 0 total scrollable area because ALL of your content only takes up 500px (the viewport height), so now that the scroll position is forced to 0 (the browser cannot scroll beyond where there is content), it triggers the onLeaveBack of that ScrollTrigger. 

 

So it's a logic issue in the way you've set things up (if I understand your question correctly). 

 

And again, it would lead to the scrollbar totally changing its height during the animation...and then disappearing which feels pretty weird as a user. 

 

Does that clarify things at all? 

 

Thank You Cassie and Jack, there's of course some problem on the logic I'm pursuing, I know that the height of the page plays a key role on the animation I'm working on so I ask u this: if you were to make this animation from that I tried to explain the beginning, where would you start from?

I don't want to bang my head unnecessarily :)

If u think there's a better way to approach this animation I'm all ears

 

The only caveat is that the two divs must be 100vh, always, at least when they're visible.

(I tried with observer, it seems more fitting but I'm having similar problems with the changing page height

 

Observer.create({
  target: window,         
  type: "wheel,touch,scroll",
  onUp: () => {
    move('100vh')
  }, 
  onDown: () => {
    move(0)
  }
});

function move(value) {
  gsap.to("#bottom", {
    "top": value,
    duration: 1.3,
    ease: Quart.easeInOut,
    // overwrite:true
  })
}


)

Link to comment
Share on other sites

  • Solution

So you do want the entire page to resize during this animation (scrollbar growing/shrinking/showing/disappearing)? Or do you just want to show/hide this element when the user does something to indicate they want to scroll in a particular direction? Because you could just put a container element directly on top of the #top) with overflow: hidden and the child set to yPercent: 100, height: 100vh and then just animate the yPercent to 0 when appropriate, maybe using Observer. 

 

It's hard to troubleshoot your Observer attempt because you didn't provide a minimal demo CodePen. 

  • Like 1
Link to comment
Share on other sites

I know I should give u a demo and I apologize for that but the thing is that since I'm in the learning phase all I was able to accomplish was already in the first post unfortunately.

I'm gonna focus on what u told me and try again with observer, I think it's the right tool.

Thank you again, I'm open to any other suggestions

Link to comment
Share on other sites

34 minutes ago, GreenSock said:

So you do want the entire page to resize during this animation (scrollbar growing/shrinking/showing/disappearing)? Or do you just want to show/hide this element when the user does something to indicate they want to scroll in a particular direction? Because you could just put a container element directly on top of the #top) with overflow: hidden and the child set to yPercent: 100, height: 100vh and then just animate the yPercent to 0 when appropriate, maybe using Observer. 

 

It's hard to troubleshoot your Observer attempt because you didn't provide a minimal demo CodePen. 

I think I solved the issue changing approach as you suggested, using transform translate (yPercent) rather than position, also Observer for the win.
Thank you again :)

  • Like 1
Link to comment
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.
×
×
  • Create New...