End pin when the bottom of the last item moves

[pixelarchitect]

I have made this pinned element that pins at a certain point and continues scrolling at a certain point but currently it continues to scroll to late, I want it to continue scrolling when the bottom of the last section hits is aligned with the bottom of the pinned section (.pinnedtext4 in this case).

I tried adding the class to the end trigger but it doesn't work. Does anyone have an idea?

ps. If you have a tip or example link how I can change the class of the titles on the left side depending on the lighting up of the text on the right side, please let me know as well!

See the Pen yLxgRoE by pixelarchitect (@pixelarchitect) on CodePen

[mvaneijgen]

Hi @pixelarchitect you where correct by trying to set the endTrigger to the end of the other element. I always like to turn on markers, so that I can see what is going on. For the logic here we want the trigger to start when it hits 25% of the view port and we want it to end when the bottom of the last element comes by, but we want it to line up with the bottom of the trigger element, so we know it starts at 25%, but that is the top of the element, so we need to figure out how high the element is. Because you're using bootstrap I had to add an inner div to enclose just the elements we need to get the height, then we add the starting 25%+={the height of the element} and we're done. Hope it helps and happy tweening! En veel geluk met het project!

 

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

 

For the auto highlighting of text (and even scrollTo functionality) check out this demo. For even more awesome demo's check out https://greensock.com/st-demos/

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