Snapping to given frame in canvas sequence

[totoczko]

Hello! I need some guidance from experienced GSAP magicians how to achieve such an effect:

1. When I scroll to the second section (with canvas) I want a scroll to automatically happen from 0% to the 25% of the sequence

2. When I scroll a little bit more, I want the sequence to automatically go from 25% to 75% 

3. Scrolling after that should happen normally, sequence should go to 100% and we should be able to scroll to section 3

4. When I go back to the section 2, again, I would like to scroll automatically from 100% to 75% 

5. One more scroll - sequence should go from 75% to 25% 

6. and final scroll up -> sequence should go back to 0% and we should be able to go to the first section

The problems that I have are to calculate a proper window scroll as we use scroll smoother + I don't have an idea how to snap to an exact frame on scroll 😕 Could you guide me somehow? 

 

 

link to codepen: https://codesandbox.io/s/morning-browser-p9yc5h

See the Pen by s (@s) on CodePen

[mvaneijgen]

Hi @totoczko welcome to the forum!

 

Let's start slow. I've disabled ScrollSmoother for now, because the effect should first work without it. You can implement a snap property on ScrollTrigger, you said you want to go to 25% of the animation the progress of an animation is from 0 to 1, so 25% would be 0.25, I've set a array to your to the snap property to snap: [0.25, 0.75], so it will snap now to 25% of the animation and 75%. Snap is a lot more powerful than that, but this is a basic setup, check out the docs for more features and try getting it to be like you want it to be https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Quote

Number | Array | Function | Object | "labels" | "labelsDirectional" - Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.). snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values. It can be any of the following:

 

Hope it helps and happy tweening! 

 

https://codesandbox.io/s/loving-herschel-678z64

[totoczko]

Hi mvaneijgen! Unfortunately the problem is indeed with the scroll smoother - when I use it the section lags horribly 😕 do you have any idea how to make it work smoothly but with scroll smoother? like on this website? https://www.metahero.io/?

[GreenSock]

@totoczko when you say "lags horribly", do you just mean that the canvas repaints less frequently? I mean it kinda makes sense if you've got a limited number of frames and you're smoothing the playhead across those frames, it'd lengthen the time between frame changes. It isn't actual lag due to performance - it's just a logic thing. 

 

For example, let's say you've only got 60 frames that you'd normally play over the course of 1 second, that'd look like 60fps. Think of each frame like a "slot" in a 1-second timeline. If you then "smooth" the playhead so that it goes from slot 15 to slot 20 over the course of 1 second...well, that's only gonna look like it's playing at 5fps ("lag") but it's doing exactly what it's supposed to do. The only way to improve that is to increase the "resolution" (have more slots in the timeline to sweep over). See the issue? 

[totoczko]

That's also a helpful tip, thanks! But my problem is more that when I scroll there is some kind of delay between the moment I stop scrolling and then snapping to given frame  (even when I set delay to 0) - it seems like this issue exists only with ScrollSmoother turned on :( 

[GreenSock]

No, I think you might be conflating a few things. 

 

ScrollTrigger cannot snap until scrolling has completely stopped. It has to keep watching the scroll position until it has not changed for a little while, otherwise snapping would interfere with normal user scrolling. So even if you set delay: 0, it won't actually have zero delay. That's simply impossible. 

 

So a certain amount of delay is to be expected. And then when you've got ScrollSmoother activated, that slows down what the scroll position does anyway. So it just looks to you like it's a ScrollSmoother problem, but that's not really the case unless I'm misunderstanding something here.