Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
plankton

Multiple Parallax Effects within ScrollTrigger Target

Recommended Posts

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

Link to post
Share on other sites
  • plankton changed the title to Multiple Parallax Effects within ScrollTrigger Target

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?

  • Like 1
Link to post
Share on other sites

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

 

 

Link to post
Share on other sites

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? 

  • Like 1
Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

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

 

Link to post
Share on other sites

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. 

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×