Jump to content
Search Community

Multiple Parallax Effects within ScrollTrigger Target

plankton test
Moderator Tag

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 comment
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 comment
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 comment
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 comment
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.
×
×
  • Create New...