Multiple Parallax Effects within ScrollTrigger Target

[plankton 2 Likes (Newbie)]

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

[Visual-Q 979 Likes (Leader)]

I cranked up the value to 1 to see it better and it seemed smooth enough to me at least within the limits of a normal wheel scroll, the only thing I can think of to smooth it out more would be a smooth scroller on the page.

 

Are you seeing substantial jank in the parallax itself or just talking about the page scroll with a mouse wheel?

[plankton 2 Likes (Newbie)]

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

 

 

[plankton 2 Likes (Newbie)]

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

[GreenSock 18,893 Likes (Superhero)]

I only had time to glance at this, but it looks like a logic issue in your code - you're looping through each [data-module-parallax] and inside that loop, you're doing ANOTHER loop of ALL [data-parallax] elements, so you end up with a bunch of duplicates. 

 

// BAD
gsap.utils.toArray("[data-module-parallax]").forEach((section) => {
  gsap.utils.toArray("[data-parallax]").forEach((parallax) => { 
    ... 
  }
});
    
// GOOD
gsap.utils.toArray("[data-module-parallax]").forEach((section) => {
  gsap.utils.toArray(section.querySelectorAll("[data-parallax]")).forEach((parallax) => { ... { 
    ... 
  }
});

I assume you only wanted to find the [data-parallax] elements that are inside the current section, right? 

[plankton 2 Likes (Newbie)]

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

[plankton 2 Likes (Newbie)]

@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 18,893 Likes (Superhero)]

Yeah, if I remember correctly some older browsers don’t have forEach() on NodeLists. gsap.utils.toArray() ensures it is a real Array. 
 

You are probably ok without it.