Next.js + Scroll Trigger + scrub animation problem

[Pavel Buchta]

I tried to recreate the scrolltrigger footer unmask animation from https://chroniclehq.com/, but when I added the scrub:true property, the animation starts to be instant.
How to fix this?

Here's the minimal demo:

https://stackblitz.com/edit/stackblitz-starters-cwggx8?embed=1&file=app/page.tsx

[akapowl]

Hello Pavel, welcome to the forum.

ScrollTrigger does have a built in tool for debugging your start / end positions.

You can ...

 

Quote

Enable visual markers during development to see exactly where the start/end/trigger points are.
Customization options abound, like markers: {startColor:"green", endColor:"red", fontSize:"12px"}.

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#markers
 

Once you enable markers in your project you'll notice that you have passed the end point of your ScrollTrigger already on load.


That is because  your end is set to 'when the top of that div hits 20% of the viewport's height' - which has already happend as the top of that div is at the top of the viewport on load. So now at the start of your ScrollTrigger you basically instantly also trigger the end, which is what you see.

So you'll probably want to adjust your end - maybe to something like 'bottom 20%'or'+=75%'instead.

You can find more explanation on how the end properety works in the docs, too.

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#end