Greyk50

I think i found the thing that causes the jerking problem, it was the element overlapping detection script I put in the page, the problem gone as soon as I removed it. Thanks for the quick respond though.

First of all, I would like to express my utmost gratitude to the founder/creator of GSAP plugin, thanks for letting us use it for free. This is the code I use it on the webpage I'm creating at the moment in order to create a parallax effect when scroll, when the page is loaded, it seems fine and the parallax effect is smooth. However after a few times of continuous scrolling up and down, I noticed the jerky animation as I continue to scroll up and down. (i tested on latest chrome and firefox, I also make sure there is no transition in the parallax image parent or the parallax image itself in the css) const paraHeroCover = gsap.utils.toArray("[data-module-parallax-hero] [data-parallax-hero]").forEach((heroWork, i) => { gsap.fromTo(heroWork, { y: 0, opacity: "1", rotation: 0.01 }, { scrollTrigger: { trigger: heroWork.parentElement, scrub: true, start: 'top top' //markers: true }, y: 500, opacity: ".2", ease: "none", rotation: 0 }); }); Have a look at the jerky animation https://greysaga.com/demo/gsv2/jerky_parallax.mp4 I have amateur level in javascript, please tell me how to fix it, or point me to right direction, thanks!