Snapping messes up when I add a delay to my Animation

[zidzad1]

Hi,

 

I have a horizontal scroll animation that works fine but I wanted a delay to the start so the user actually has time to read it before it just starts snapping, so I did that by adding the "+=0.25" which does give it a delay, but it messes the whole logic of the snap by not snapping to exactly my sections.. please help.

See the Pen WNWrwyO by zidzad1 (@zidzad1) on CodePen

[Rodrigo]

Hi @zidzad1 and welcome to the GSAP Forums!

 

The issue here is merely a mathematical one, nothing messed up here.

 

First, snap works based on percentage values between 0 and 1. So when you pass a value of 0.333 (1/3) to the snap value ScrollTrigger will snap it's progress to 0, 1 and every value that is a multiple of 0.333 in between, so it goes like this: 0 - 0.333 - 0.667 - 1, so that snaps to every slide without any issues. Your tween is 1 second so the left side of the first slide will be at the left of the screen at 0 seconds. The left side of the second slide will be at the left side of the screen at 0.333 seconds and so forth.

 

Now when you add a delay the left side of the first slide will be at the left of the screen at 0.25 seconds, so there are 0.25 seconds where the first slide doesn't move. Then the slides start to move. The left side of the second slide will be at the left of the screen at around 0.583 seconds,  the left side of the third slide will be at the left side of the screen at around 0.917 seconds 🤯. Finally the left side of the fourth slide will be at the left side of the screen at 1.25 seconds, so you have to feed the snap config an array with the percentages of each slide which are very different than 0.333 for each slide, see the problem?

 

Here is a fork of your demo with a dynamic approach to this:

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

 

Hopefully this helps.

Happy Tweening!

[zidzad1]

On 3/7/2024 at 10:07 PM, Rodrigo said:

Hi @zidzad1 and welcome to the GSAP Forums!

 

The issue here is merely a mathematical one, nothing messed up here.

 

First, snap works based on percentage values between 0 and 1. So when you pass a value of 0.333 (1/3) to the snap value ScrollTrigger will snap it's progress to 0, 1 and every value that is a multiple of 0.333 in between, so it goes like this: 0 - 0.333 - 0.667 - 1, so that snaps to every slide without any issues. Your tween is 1 second so the left side of the first slide will be at the left of the screen at 0 seconds. The left side of the second slide will be at the left side of the screen at 0.333 seconds and so forth.

 

Now when you add a delay the left side of the first slide will be at the left of the screen at 0.25 seconds, so there are 0.25 seconds where the first slide doesn't move. Then the slides start to move. The left side of the second slide will be at the left of the screen at around 0.583 seconds,  the left side of the third slide will be at the left side of the screen at around 0.917 seconds 🤯. Finally the left side of the fourth slide will be at the left side of the screen at 1.25 seconds, so you have to feed the snap config an array with the percentages of each slide which are very different than 0.333 for each slide, see the problem?

 

Here is a fork of your demo with a dynamic approach to this:

 

 

 

Hopefully this helps.

Happy Tweening!

Great, amazing, this works perfectly on PC however on mobile it's very buggy. The problem is only with the start and end sections... which for some reason seem to push it down at the start and end .So esentially the view snaps to the top at the end  and to top top at the start in a weird way. The other sections work fine. It's fine on codepen, just buggy on mobile, i've attached some screenshots of what it looks like. 

[Rodrigo]

Hi,

 

Sorry to hear about the issues you're having, but there is not a lot we can do without a minimal demo that clearly illustrates the problem. Maybe this is tied to the address bar hiding/showing on mobile devices, so you could try using the ignoreMobileResize config option:

ignoreMobileResize if true, vertical resizes (of 25% of the viewport height) on touch-only devices won't trigger a ScrollTrigger.refresh(), avoiding the jumps that can happen when the start/end values are recalculated. Beware that if you skip the refresh(), the start/end trigger positions may be inaccurate but in many scenarios that's preferable to the visual jumps that occur due to the new start/end positions.

ScrollTrigger.config({
  ignoreMobileResize: true,
});

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.config()

 

Or you can try normalizeScroll():

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Happy Tweening!

[GreenSock]

I would also recommend making sure you're using the latest version of GSAP/ScrollTrigger. Your demo uses a VERY old version.