plankton

@GreenSock just one last question on this if I may, do we need to use the the second gsap.utils.toArray It seems to work just fine without with section.querySelectorAll("[data-parallax]").forEach((parallax)

@GreenSock that's the one! Works a charm. Now you've highlighted that – it's quite obvious. I've updated the previous pen and removed Math.sign() from the y start value. Thanks for a speedy response on this.

Okay... slightly less janky/jump using the Math.sign() function on the y movement to return - or + https://codepen.io/plankton/pen/XWpRyJv?editors=1010

The actual parallax is smooth and works perfectly for me, it just doesn't work with two items selected within the 'data-module-parallax'. For example, in the first test block #01 both c-blockShow_content and c-blockShow_img have the attributes applied but only the content block has parallax. I removed my second arrayTo in the codepen example above. Hope that makes sense. Here's the second codepen with the arrayTo within the first one: if you inspect, you can see the transform applied to both c-blockShow_content and c-blockShow_img. https://codepen.io/plankton/pen/BapRqYR?editors=0110

Hi all, I'm trying to create a mini parallax gsap plugin using ScrollTrigger where you can set "data-parallax data-speed'' attributes to any item within the ScrollTrigger target 'data-module-parallax'. I've tried creating an arrayTo loop within the first one which kind of works but creates a bit of a janky result. Is there a way to achieve this? Any help would be most appreciated. Test Block #01 has two "data-parallax data-speed='-0.2'" applied.

Had the same issue, but here's the solution setTimeout(function () { var scroll = new locomotiveScroll({ el: document.querySelector(".o-scroll"), smooth: true, getSpeed: true, getDirection: true }); scroll.on("scroll", function (t) { document.documentElement.setAttribute("data-direction", t.direction); }); }, 100);