shikari Posted November 12, 2021 Share Posted November 12, 2021 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 More sharing options...
GreenSock Posted November 12, 2021 Share Posted November 12, 2021 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? 1 Link to comment Share on other sites More sharing options...
shikari Posted November 14, 2021 Author Share Posted November 14, 2021 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 More sharing options...
GreenSock Posted November 14, 2021 Share Posted November 14, 2021 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 More sharing options...
shikari Posted November 15, 2021 Author Share Posted November 15, 2021 Thank you for your answer. I will create a minimal demo and get back to you. 1 Link to comment Share on other sites More sharing options...
shikari Posted November 15, 2021 Author Share Posted November 15, 2021 @GreenSock, I decided to use current approach with your scrolling object, which fixed jumping problem, but one problem is still there. Right part image which got pinned sometimes jittering as well. Do you know what the problem is and how to solve it? See the Pen bGrQper by lElfenLiedl (@lElfenLiedl) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted November 15, 2021 Share Posted November 15, 2021 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 More sharing options...
shikari Posted November 16, 2021 Author Share Posted November 16, 2021 @GreenSock, Here I tried to record the issue. Video link. My goal is to snap to closest section when you reach a specific part of my website. Together with it I want to pin image on the right side of this part, which would change image together with sections snapping. Link to comment Share on other sites More sharing options...
shikari Posted November 16, 2021 Author Share Posted November 16, 2021 I use windows 10 and chrome. My colleague also says it doesn't work smooth in safari. Unfortunately I can't test it in safari Link to comment Share on other sites More sharing options...
Cassie Posted November 16, 2021 Share Posted November 16, 2021 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 More sharing options...
GreenSock Posted November 16, 2021 Share Posted November 16, 2021 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 1 Link to comment Share on other sites More sharing options...
shikari Posted November 19, 2021 Author Share Posted November 19, 2021 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 More sharing options...
shikari Posted November 19, 2021 Author Share Posted November 19, 2021 @GreenSock, so in theory I can wrap my website in this helper function to adjust scroll behavior? I wonder if it causes big performance subsidence. What do you think? Link to comment Share on other sites More sharing options...
GreenSock Posted November 19, 2021 Share Posted November 19, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now