Absolute Background Color With Text ScrollTrigger Animation

[tatanka]

I want to make blend text animation with scrolltrigger but i have a problem with pinned background color. My goal is after text about to finish unpin the background color scroll with text alongside.

I want to unpin when text reachs here:

But background color remain until whole page scrolled. Any help appreciated, thanks in advance!

See the Pen XWobVQV by Orhan-Celik (@Orhan-Celik) on CodePen

[mvaneijgen]

Hi @tatanka welcome to the forum!

 

Is this what you're looking for? I've moved your end marker to the same position as your start marker and set the end trigger to be the #content element, so that it is easier to line it up with the bottom.

 

See the Pen yLGNKYQ?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

[tatanka]

Hi @mvaneijgen Thank you so much for your help, but i want to move that black background with text when it reaches end of scroll.

[mvaneijgen]

For me they both scroll up when the end trigger is met, so I'm not sure what it is you're trying to do. 

[tatanka]

I want to stick that black bar to end of the text:


I think i should tweak around 'end' like 

end: "bottom top+=600",

Thank you again @mvaneijgen you inspired me much ❤️