Global parallax data attributes moves text off element

[amit95]

I have an animation which works based on data attributes, allowing it for global use (I believe I saw this demo somewhere in the docs, but can't find it).

 

Nonetheless, I have in my demo applied these attributes to 4 sections. The parallax looks to be working on the first element, however, they move outside of the element on subsequent elements.

 

The issue seems to stem from the y positioning:

 

y: (i, el) => -(1 - parseFloat(el.getAttribute("data-speed"))) * ScrollTrigger.maxScroll(window)

 

Consider the first section the demo that looks to be working. For that section:

 

• -(1 - parseFloat(el.getAttribute("data-speed"))) is equal to -0.2 
• ScrollTrigger.maxScroll(window) is equal to 1167 
• -0.2 * 1167 = -233.4

 

However, upon inspecting the element, it doesn't look like it's translating anywhere near that value.

 

All I'm trying to achieve is a global script, where I can apply attributes and achieve a parallax effect where items move up subtly.  Unsure why the elements move outside of its parent?

 

See the Pen PoevQVZ?editors=1111 by amit_rai95 (@amit_rai95) on CodePen

[GreenSock]

When I log out the values, it appears to be doing exactly what you're asking it to do. I'm a bit unclear about what you think is wrong. 

 

You're setting the final translateY() values that'd be in place when you scroll all the way down to the bottom of the page. 

 

You also have them set up so that every one of them starts translating from the moment you begin scrolling. They span across the entire scroll of the page so that they all reach their end position when the scroll is at its max.

 

We put a bunch of effort into building this kind of functionality into ScrollSmoother so that you could add simple data attributes like that and it'll handle all the math for you and ensure that they only move while in the viewport and they reach their "native" position when centered in the viewport. Quite handy! https://greensock.com/scrollsmoother

 

You're welcome to do that manually by setting up your own ScrollTrigger for each element. It's just not a super simple calculation, that's all (at least not if you're trying to make it only happen while the element is in the viewport).