How to eliminate delay on scrollTrigger?

[FineDiv]

Hi everyone

this is my first post here on this forum. I would like to ask for some help as I'm GSAP newbie. I'm playing with sections overlap to move in reverse order and all is working as I expected BUT there is a delay on my animation and I can't find from where is coming from be able reduce _(remove)_ it to make overlap smooth.

 

Here is simple example with use JS  but as GSAP newbie but I can't recreate it in GSAP. _(ignore buttons as I just create them to run animation. In GSAP it trigger on scroll)_

 

See the Pen zYPvVzq by stan65 (@stan65) on CodePen

 

Anyone can point me a right direction to make it smooth and check if Im doing it right some way?

 

Thanks

 

Stan

See the Pen jOaWrmR by stan65 (@stan65) on CodePen

[akapowl]

Hello Stan,

 

If by 'eliminate delay' you mean that you don't want it to visibly scroll at all, but instantly animate to the next section, I'm afraid that will not really be possible by utilizing snapping for it, as ScrollTrigger does have to wait for the scrolling to stop before it can apply the snapping.

 

You can adjust some snapping options by using snap as an object - but it will still not work without any 'delay', just as mentioned above

 

snap: {
  snapTo: 1 / (sections.length - 1),
    duration: { min: 0.2, max: 0.4 }, // the snap animation should be at least 0.2 seconds, but no more than 0.4 seconds (determined by velocity)
      delay: 0.0, // wait 0.0 seconds from the last scroll event before doing the snapping
        ease: "none" // the ease of the snap animation ("power3" by default)
}

 

 

 

If you are going for that slider-like instant animate on scroll effect, in theory you could use the approach mentioned in this thread (which you appear to already have commented-out in your codepen demo) - but be aware of what Zach already mentioned in that thread.

 

On 11/22/2020 at 3:32 AM, ZachSaucier said:

It should be said that ScrollTrigger is not built to scroll-jack like what this approach does. The approach above is a hack and I don't really recommend using it. If you really need this sort of functionality then you'll need to either build the functionality yourself or use an existing tool like fullpage.js. But even then, depending on your needs, there are likely to be issues because web browsers are simply not built to work in this sort of way. 

 

 

 

 

So for a slider-like instant animate-on-'scroll' type of effect, you will probably be better off utilizing an approach where you listen to mouse/keyboard/touch events instead of relying on actual scrolling - most of it will be figuring out the logic behind the scenes for it to work, though. Something like these examples do.

 

See the Pen PoWapLP by BrianCross (@BrianCross) on CodePen

 

See the Pen MzWzyv by PointC (@PointC) on CodePen

 

See the Pen kDvmC by bassta (@bassta) on CodePen

 

 

 

 

 

 

[FineDiv]

hi @akapowl thanks for fast response. Yes that's what I'm looking for as I have found that animation trigger after scroll ends. I will look in these examples today.

Thanks again

Have a great day