Multiple pinned scrolltriggers

[webflow.be 2 Likes (Newbie)]

Hello,
I need to be able to activate different scroll triggers on 1 page, whereby the left side always remains pinned.
I've come a way, but I can't do the following things:
- the end parameter should be calculated based on the height of the right side in such a way that the pinned part stops nicely at the end
- the 2nd section should work the same way, but it doesn't. I suspect this is because the ".item--fixed" pin is incorrect. Can you point it to the parent element? (section)

 

Thx!

See the Pen NWLxrRp by wouterverstuyf (@wouterverstuyf) on CodePen

[mvaneijgen 1,725 Likes (Superhero)]

You need to scope your .left to the section you're in. Right now you tell it "pin all elements on the page with the class .left", but you want it to say "pin all elements with the class .left in the current section" 

 

See the Pen eYLJzxx by mvaneijgen (@mvaneijgen) on CodePen

[webflow.be 2 Likes (Newbie)]

@mvaneijgen

Thx! I knew I had to target the current section, but didn't know how to do that, so here it is.
Do you also know what the correct value is for bottom, so that the pinned text stops at the end of the section.

Thx dude!

[mvaneijgen 1,725 Likes (Superhero)]

I would recommend enabling the markers to see where they are positioned and then lining them up where you want them.

 

See the Pen eYLJzxx by mvaneijgen (@mvaneijgen) on CodePen

[webflow.be 2 Likes (Newbie)]

Yes, by playing with the end parameters I was able to determine the position.

Thx!