Jump to content
Search Community

ScrollTo twitching and flashing on fast scrolling

shikari test
Moderator Tag

Recommended Posts

Hi.

Having this

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

as a reference and I wanted to create something similar but faced with issue when scrolling between jumping sections. When I give just one scroll it goes smooth to the next part, but if I want to go faster and scroll multiple times it's twitching and right side image flashing. This also happens in demo example but not so noticeable. I can't figure out how to fix it.

Please, help me out with it. Thanks in advance.

See the Pen eYELrVL by lElfenLiedl (@lElfenLiedl) on CodePen

Link to comment
Share on other sites

I updated that demo to disable scrolling during the tween and force GSAP to update when the window dispatches a "scroll" event because some browsers handle events in odd ways, like iOS. For example, the browser may fire a requestAnimationFrame() which causes GSAP to update, but then on the very same tick it then fires a "scroll" event and (on a separate thread) tries to render the scroll position in a different place due to user interaction or momentum scrolling, thus it kinda overwrites what GSAP set it to. 🙄

 

I created a simple "scrolling" object that lets you enable()/disable() scrolling during the scroll tween: 

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

 

Does that resolve things for you? 

  • Like 1
Link to comment
Share on other sites

Thank you, this works fine now, except for the right part image, it jittering sometimes. The scrolling object looks a bit complicated, though.Is there a better way to achieve this animation without scrollTo? I tried accomplish it with snap property in ScrollTrigger, but it didn't work as needed :(

Link to comment
Share on other sites

7 hours ago, shikari said:

Is there a better way to achieve this animation without scrollTo?

Are you asking if there's a better way to animate the scroll position other than using GSAP's scrollTo? Not that I'm aware of no.

 

7 hours ago, shikari said:

I tried accomplish it with snap property in ScrollTrigger, but it didn't work as needed

Why don't you post your attempt (as a minimal demo) and then share details about what exactly isn't working the way you intended? 

Link to comment
Share on other sites

Can you please provide instructions about how to reproduce the issue you're describing? What browser/OS? 

 

Also, is your goal here to just snap to the closest section or do you want to literally prevent users from scrolling in some situations (like you've currently got)? As a user, its pretty annoying, quite frankly. So I wonder if we're chasing a solution that's less than ideal to begin with and it'd be better to back up and go a different route completely. 

Link to comment
Share on other sites

Hey @shikari

First off - that video is a recording of a codepen - It's worth noting that this can sometimes cause issues because you're viewing things in an iframe. I tend to use the debug view.

Agreed here, super frustrating - 

18 hours ago, GreenSock said:

As a user, its pretty annoying, quite frankly. So I wonder if we're chasing a solution that's less than ideal to begin with and it'd be better to back up and go a different route completely. 


How about something like this instead?

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

Link to comment
Share on other sites

Yep, I'd prefer Cassie's solution. As for the occasional jittering you saw, I'm pretty confident that is purely related to the fact that most browsers handle scrolling on a completely different thread that is NOT synchronized with the main thread, thus the browser paints those scroll updates (bad) and then ScrollTrigger's code executes on the main thread and corrects things. In all my research, I've never come across anything that can resolve that - it's a fundamental problem in the way many browsers work. The only way I know of to get around it is to use a smooth scrolling approach which does all the scrolling on the JS thread, but that involves scroll-jacking which I'm generally not a big fan of. But I definitely see the appeal in many cases. There's even a native ScrollTrigger-based helper function in the docs if you'd like to give that a try: 

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

  • Like 1
Link to comment
Share on other sites

Hey, @Cassie. Thank you for help here.

I like the way your version works, but even though it looks more compact, I can't figure out the way all parts work.
I will try to explain step by step and asking you to correct me if I'm wrong.

1.yPercent: -100 * (items.length - 1). This is what's happening on each scroll(snap). Transforming current item 200%(if we have 3 items) up by Y axis (I don't understand why 200 instead of 100);
2.Ease is clear
3.trigger is place where animation should start (depends on start and end).
4.pin: animatedPart. animatedPart gets pinned.
5.start: 'top top',
    end: `+=${itemContainer.offsetHeight}`,
I assume we indicate what length our animation will take and I can indicate end as +=300% if I want to, instead of container height.
6.Scrub is clear
7. Snap is the hardest part for me😅. Value is 0.5 in my case, therefore it has two points: 50% and 100%(as far as I understand). In my case I want to have 3 snaps: 33%, 66%, 100%(for each item), start it when bottom of the viewport touches top of our trigger and if I go from the very bottom- when top of the viewport touches bottom of the trigger. Is that possible or I misunderstand the way it works?

Link to comment
Share on other sites

5 hours ago, shikari said:

(I don't understand why 200 instead of 100)

Because you want to keep 1 section in the viewport. If you did 300, it would move things all the way off screen.

 

5 hours ago, shikari said:

I assume we indicate what length our animation will take and I can indicate end as +=300% if I want to, instead of container height.

If you're using the scrub feature, it will fit the entire animation between the start and end positions (logically that is the only behavior that would make sense). So if you want it to last longer, you'd need to move the end position further down the page. See the docs: https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

5 hours ago, shikari said:

Snap is the hardest part for me😅. Value is 0.5 in my case, therefore it has two points: 50% and 100%(as far as I understand). In my case I want to have 3 snaps: 33%, 66%, 100%(for each item), start it when bottom of the viewport touches top of our trigger and if I go from the very bottom- when top of the viewport touches bottom of the trigger. Is that possible or I misunderstand the way it works?

If you want it to snap to every 33% increment, then it'd be snap: 0.33333 (1/3). It's just an increment of the progress, so the beginning is 0 and the end is 1. 

 

5 hours ago, shikari said:

so in theory I can wrap my website in this helper function to adjust scroll behavior?
I wonder if it causes big performance subsidence.

Right, you can wrap things in a <div> that is position: fixed and let that helper function do the scrolling accordingly. As for performance, no, I wouldn't really worry about that. It's fast. The whole point of that helper function, though, is to get a smooth scrolling effect , where it takes a little time to "catch up" (a lot of people seem to like that effect). 

 

Good luck!

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...