PierreG

Hi sorry for the delay. A very very good thanks to point me in the right direction :). I use container height multiply by 2 then multiply by my depth dataset. It does the job slowing down animation. Everything works as expected. I encounter issue on webit browser on ios where junky scroll behavior appear sometimes. I finally solve it by adding touch-action: none; in my css. Thanks a lot again

Hi very good approach on the second pen. I need to know now how to get the correct ratio between my depth data attribute and the scroll. data-depth = 1 => move same speed as scrolll, data-depth=0 => not moving during scroll. Thanks a lot again

Hi @mvaneijgen thank you for your time. I understand that disable scrolltrigger will show my animation but my animation must be based on scrolltrigger. Explanation : My section enter the viewport I want my BG to move very very slowly ( like 0.1 of scroll) and below layers to move faster based on the depth parameter. I found this function (CODEPEN UPDATED) : y: function () { return ( (1 - depth) * (ScrollTrigger.maxScroll(window) - (this.scrollTrigger ? this.scrollTrigger.start : 0)) ); }, which work very well for the first section but each next section have an increment behavior. It's like Scrolltrigger.maxScroll(window) and my calculation got an increased value in each next section. You can take a look at my dev website. If you scroll down to last section (all sections are configured exactly the same for the BG) you will see that sections below the first accelerate the speed of Y. https://www.dev.pierregagliardi.com/test/ Thanks

Hi all I am happy to make my first website with GSAP. It is awesome but I encounter an issue (or not), so I need your clarification on how setting it up. I have a website with multiple section ( from wordpress elementor). Each section have absolute image in it. Each image depending on a data-depth parameter which is use to move on y axis each image. what I want, if I set depth to 0, the image don't move and if I set depth to 1 I want the image to move exactly to the scroll speed. As you can see in the codepen. 0 make the y to be inverted. Example codepen Any idea ? Also here is the full website I developp. As you can see (depend on hardware) it is very laggy. And when I stop scrolling sometimes the content continue to refresh for few milliseconds. https://www.dev.pierregagliardi.com/test/ Have a good day Thanks Pierre