Jump to content
Search Community

Absolute Background Color With Text ScrollTrigger Animation

tatanka
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Posted

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:
image.thumb.png.f8b04528650bc1217c53de34795b8390.png
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.

  • Solution
Posted

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.

  • Like 2
Posted

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.

Posted

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. 

  • Like 1
Posted

I want to stick that black bar to end of the text:
image.thumb.png.d0a9ca71d85f24c8bfcafc3ede1a4c0b.png

I think i should tweak around 'end' like 

end: "bottom top+=600",

Thank you again @mvaneijgen you inspired me much ❤️ 

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...