ScrollTrigger animation slows down as page is scrolled down

[Krishnakant]

Hi,

 

I have a simple CSS grid layout with ScrollTrigger animations for odd and even elements in the layout on scrolling. It works fine initially, but as we scroll down, the animation slows down, and when at the very bottom of the page, it almost stops animating.

 

I wonder why this happens - I want to animate the items evenly without being bothered about scroll position, please let me know how can I achieve it.

 

Thank you.

See the Pen NWeLzeb by designjuice (@designjuice) on CodePen

[mvaneijgen]

Are you talking about the ease that is being applied? Every tween has a default ease: "power1.out" which means it will start fast and slows towards the end. This is usually not what is preferred when using ScrollTrigger with a scrubbed timelines, setting ease: "none" then feels nicer. 

 

Hope it helps and happy tweening! 

 

See the Pen QWzVBYB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen