Jump to content
Search Community

Layered pinning onEnterBack callback runs multiple times

Teebo test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi all,

 

I need some guidance on what I might be doing wrong and if my approach is efficient

I have recently asked a question regarding snapping sections on scroll 

The response from @akapowl was really helpful because it opened my understanding a bit and directed me to some light as I was lacking understanding
of the ScrollTrigger plugin.

I now have implemented what I wanted to achieve by following this pen  (

See the Pen rNLOdbB by GreenSock (@GreenSock) on CodePen

)
This works fine, however it breaks when I am scrolling upwards from the bottom of the viewport as it is scrolling on its own to the top.
I am getting no errors and I see it sometimes happens on the demo from the pen.
I am not sure why this is happening in need some guidance.
Any suggestions or corrections will be much appreciate, thank you.

See the Pen BaRaqQL?editors=1111 by Teebo (@Teebo) on CodePen

Link to comment
Share on other sites

6 hours ago, Teebo said:

it breaks when I am scrolling upwards from the bottom of the viewport as it is scrolling on its own to the top.
I am getting no errors and I see it sometimes happens on the demo from the pen.

I can't reproduce any noticeable problems - can you please provide very details (and hopefully simple) instructions for how to reproduce the issue? I scrolled to the bottom and then back up. I don't see anything unexpected. It annoys me to have the autoKill: false behavior but I understand that's sometimes what developers want/need. 

 

If there's any way to provide a minimal demo that doesn't use a 3rd party framework like Angular, you'll significantly increase your chances of getting a helpful answer :)

Link to comment
Share on other sites

Hi @Teebo

This codepen seems to be working perfectly for me. 

Could you possibly explain or record a video of the issue (as Jack said)

14 hours ago, GreenSock said:

I can't reproduce any noticeable problems - can you please provide very details (and hopefully simple) instructions for how to reproduce the issue?

 

Link to comment
Share on other sites

Hi @Cassie, thank you,

 

Please try to scroll to the bottom until the end and try to scroll up when you are at the very bottom of the screen.
You will notice the scroll will start automatically for all the sections up until the top.

 

I thought it was due to the scroll start triggers being on view all the time but tried to give a value like:

start: '90% bottom',

 

But this does not solve the auto =matic backward scrolling.


Please check carefully this pen: 

See the Pen BaRaqQL by Teebo (@Teebo) on CodePen



I have added the markers so that it is easy to see

Link to comment
Share on other sites

2 hours ago, Teebo said:

Please try to scroll to the bottom until the end and try to scroll up when you are at the very bottom of the screen.
You will notice the scroll will start automatically for all the sections up until the top.

 

I see the same issue. When you scroll to the end of the document, and then scroll up once, it should just scroll to the previous panel and stop. However, once it scrolls that panel, it triggers again, and starts to scroll to the panel above that, and so on until it reaches the top.

 

This behavior doesn't happen when switching to version 3.6.1.

 

Only tested in Chrome on Windows.

 

 

  • Like 2
Link to comment
Share on other sites

25 minutes ago, OSUblake said:

Only tested in Chrome on Windows.

 

Interesting - I tested it like a dozen times on that combination and didn't get to reproduce it once, with mousewheel and arrow-keys that is.

 

I can reproduce it with a trackpad - which I guess is to be expected, as it's the same as on mobile, where when you swipe in a direction, it will keep on scrolling depending on how intense that swipe was.

Link to comment
Share on other sites

  • Solution

Apparently some browsers size things oddly, like in this case if you console.log() the innerHeight of the window and compare that to the offsetHeight of the panels, you'll see that even though the panels are set to 100vh, the browser may render them 1px taller! Since the code bases everything off of window.innerWidth including the scrollTo value, it ends up being inaccurate (1px drift for each panel, compounding as you go up). That's not a GSAP issue - it's a combination of a browser issue and logic flaws in the JavaScript that's assuming that the panels will be EXACTLY the same height as window.innerHeight. 

 

Here's a solution that simplifies things too, were you only need one ScrollTrigger for each section: 

See the Pen LYyENvY?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that work well for everyone? 

  • Like 2
  • Thanks 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...