ScrollTrigger self.previous().end won't work as expected. Third section won't pin to the end of second one.

[jakubkanna]

What I'm trying to do is pin the third section to the bottom of the second one. The first and second sections have 'end +=300' because I want them to scroll slower than the third one. I'm clearly doing something wrong and can't understand why 'start: self => self.previous().end' doesn't make the third section start at the end of the second one. Thank you."

See the Pen vYvEqzd by jakubkanna (@jakubkanna) on CodePen

[mvaneijgen]

Hi @jakubkanna welcome to the forum! I'm not sure what it is you're trying to do.

 

I've logged all the values you get from self.previous().end (it seems to be running 3 times per ScrollTrigger). I've also given each ScrollTrigger an id, so what we can see which marker belongs to what ScrollTrigger and see if that is correct. Instead of self.previous().end you can also give your ScrollTriggers a name and getting their values const mySt, mySt.end() 

 

I've personally found that you hardly need more than one ScrollTrigger to get the desired effect. Can you maybe explain in other words what it is you're trying to do.

 

See the Pen XWobmpW?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

 

[jakubkanna]

Hi @mvaneijgen,
The second and the first sections are overlapping. To make it easier to read the content of the second tab, I wanted to scroll on it longer than on the other sections, similar as in this example:

See the Pen LYpaPQp by hexagoncircle (@hexagoncircle) on CodePen

. Then the third section is the rest of the page content. So the difference between shared link is that I just want two first sections to overlap...

[Rodrigo]

Hi,

 

Maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!

[jakubkanna]

Clean and simple, thank you!