Translated element as scroll trigger trigger element

[someguy]

Hello,

I am trying to use an element as a scroll trigger which itself (or its parent) is animated/translated.

Basically the .content should scroll over the .header and inside content there are scrollTriggers which animate the content (h1, p).

Problem is because .content is translated by the timeline and first scrollTrigger, its start and end positions stay in the original location (before the transformation is applied) which is never reachable and wrong, it should also consider the y-translation.

How can I get this to work? Ive tried calling ScrollTrigger.update in the onUpdate of the translate tween but its causing to much lag/stuttering.

 

 

 

See the Pen KKYEvRo by TheM (@TheM) on CodePen

[mvaneijgen]

By changing the order of the ScrollTrigger creating and setting pinnedContainer to the ScrollTrigger that have another ScrollTrigger that has a pin you can fix this issue.  Hope it helps and happy tweening!  

 

See the Pen vYMPeEg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[someguy]

Thanks for your reply.
I have tried it but it only seems to work because if you look closely the start positions are not exactly where theyre supposed to.
I also have the problem that I have multiple of these sections and do not know what content is inside .content

 

 

I have updated the demo here incorporating your soltion.
It has 2 functions v1 and v2 where the difference is that v1 crates children with parents one by one while v2  first  creates all children and then all parents.

 

See the Pen ZEZPXxE by TheM (@TheM) on CodePen

[Rodrigo]

Hi,

 

I'm not 100% sure of what you're trying to achieve here, but maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!