Jump to content

Sundararajan KS

Text color change on scroll

Go to solution Solved by akapowl,

Recommended Posts



I am trying to change the color of the title from Black to White (& fade the intro text) when the title starts entering the blue region and stays there until the user scrolls back up.

But for some reason, the color change happens either earlier or late but never on the border. I tried to get the height of the intro text and then set the start/end value,  start position of the blue region etc, but nothing is working.


Can anyone please help and let me know what I am doing wrong.


I can't hardcode pixels as the introduction text below the title can be one line or 10 lines.


Design like this:Untitled.thumb.jpeg.83de67f31674353db8587e7eceb7e541.jpeg


See the Pen mdweQQL by sundararajanks (@sundararajanks) on CodePen

Link to comment
Share on other sites

  • Solution

Hey @Sundararajan KS,


making the start dependent on the .title's offsetHeight and the end dependent on the .titlewrap' offsetHeight like in this


start: "top top+=" + document.querySelector(".title").offsetHeight,
end: '+=' + document.querySelector(".titlewrap").offsetHeight,


seems to do the trick for me. It also works properly with different font-sizes. One thing I added is a margin: 0 for the title as there was some margin-collapsing going on for the title, when the pinning happened. Does that help? 


See the Pen 1bc136ed24a4ae105f657da552305e11 by akapowl (@akapowl) on CodePen




The example above does not show the right approach to this.

I was tricked because I did not consider the default ease that is being applied by GSAP (which is power1.out).


So here's how I actually got it working (resize-stable, too):


1) set ease: 'none', so the clip-path has a linear change, which it needs to line up with the scroll

2) start and end are both dependent on the .title's offsetHeight (I was actually wondering before why it worked with the .titleWraps offsetHeight)


start: () => "top top+=" + document.querySelector(".title").offsetHeight,
end: () => '+=' + document.querySelector(".title").offsetHeight,


and 3) for stability on resizing I also had to add a margin: 0 on the .intro paragraph, as when I resized down, I still got some jumpiness. I added some spacing in between the texts by setting a margin-bottom on the .title instead. Also, the .whitetext showed way too low when resizing down so far that the title would break into two lines, so I set the .whitetext to position absolute alongside top: 0 and left: 0 and now it should work properly, even on resizes.


See the Pen 5b36f5918642cac7da750956804ef70a by akapowl (@akapowl) on CodePen


  • Like 4
Link to comment
Share on other sites

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.