[Multiple Parallax Effects within ScrollTrigger Target]

@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) 

 

[Multiple Parallax Effects within ScrollTrigger Target]

@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.

[Multiple Parallax Effects within ScrollTrigger Target]

Okay... slightly less janky/jump using the Math.sign() function on the y movement to return - or +

 

See the Pen XWpRyJv?editors=1010 by plankton (@plankton) on CodePen

[Multiple Parallax Effects within ScrollTrigger Target]

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.

 

See the Pen BapRqYR?editors=0110 by plankton (@plankton) on CodePen

 

 

[Multiple Parallax Effects within ScrollTrigger Target]

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.

See the Pen XWpRBem?editors=1010 by plankton (@plankton) on CodePen

[locomotive scroll direction with ScrollTrigger]

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);