Simple parallax based on data-speed (like LocomotiveScroll)

[Black Ducas]

Hi, I'm really stuck on this simple thing. I just want gsap to change the scrolling speed of elements basing on data-speed attribute. That is, data-speed=1 it has to do nothing, it's normal speed. If 0.5 it's half, if -0.5 it's half but in inverted direction.

I started from the demo in the docs, and adapted to my layout, but with this layout it doesn't work anymore. 

 

 

I don't get where I'm wrong.

I'm trying also with this other way:

 

  gsap.to("[data-speed]", {
    y: (i, el) => (1 - parseFloat(el.getAttribute("data-speed"))) * ScrollTrigger.maxScroll(window),
    // y: (i, target) => target.dataset.speed * 500,
    // y: (i, target) => -ScrollTrigger.maxScroll(window) * target.dataset.speed,
    ease: "none",
    scrollTrigger: {
      trigger: "#featured-posts",
      scrub: true,
      markers:true,
    }
  });

but again don't work as expected.

Hope someone could help me. Thanks

See the Pen yLXbpaM by gooogooo (@gooogooo) on CodePen

[Cassie]

Hey Pal!

So if you're just animating stuff in that section you'll want to change the trigger to that specific container and also adjust the calculation to be using the container height and not the maximum possible scroll height.

I don't quite understand how you're aiming to not animate out of that section though? If you're moving the elements on the y axis (unless it's only incredibly subtle) they'll move outside of that container.

See the Pen WNOjzEB by GreenSock (@GreenSock) on CodePen

[Black Ducas]

Hi @Cassie

thanks for answer. Yes you're right on this point "I don't quite understand how you're aiming to not animate out of that section though?"

The codepen works nice but I'm thinking what's the pro of using the whole section as trigger 🤔, because now it animates also the elements outside of the viewport. Is it possible to use the single elements as trigger? It should be better for performance and smooth animation. Let me know your opinion

 

In general, I'm struggling to understand the logic behind this line:

y: (i, el) => (-1 * parseFloat(el.getAttribute("data-speed"))) * postsSection.offsetHeight,

Thanks

[Cassie]

That line is the speed from the data attribute multiplied by the section height (multiplied by -1 to influence the direction)

If you log out the numbers generated in that line you'll see the amount you're instructing them to move on the y axis.

 

0
-569
-426.75
569
-569

As you're animating the y position it's going to move the elements out of their initial positioning. The way around that is to animate them substantially less or create a taller section for them to animate within - or a combo of both.

Does this help?

See the Pen RwgVzwL?editors=0010 by GreenSock (@GreenSock) on CodePen

[Black Ducas]

Hi @Cassie yes it helped.

I just asking me: what's the pro of using the whole section as trigger, because now it animates also the elements outside of the viewport. Is it possible to use the single elements as trigger or it makes no sense? It should be better for performance and smooth animation. Let me know your opinion, thanks

 

And, in your opinion, your code is already optimized and performant like LocomotiveScroll parallax or are needed more optimizations?

[Cassie]

1 hour ago, Black Ducas said:

I just asking me: what's the pro of using the whole section as trigger, because now it animates also the elements outside of the viewport.

There's no connection to using the section as a trigger and the elements being animated outside of the viewport.

I guess the pro would be that it's not animating? If you try to use the boxes as a trigger once they move they may throw the trigger position off.

You can use the start and end trigger positions to adjust where the animation starts and ends? Maybe that's what you're looking for?

 

 

1 hour ago, Black Ducas said:

And, in your opinion, your code is already optimized and performant like LocomotiveScroll parallax or are needed more optimizations?

We're just tweening some elements on the Y axis so yes, just as performant as locomotiveScroll, if not more so.