Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
pauljohnknight

Text Color Change (blend-mode effect)

Recommended Posts

Hi,

 

Is it possible with Greensock to achieve an effect were as a div slides over some text, the text changes color, but only the text covered by the div changes color.

 

Visual Example:

 

In the Codepen supplied I have a red bar that slides over some text and I would like the text to change to white whenever the red bar slides over it, however, whenever any of the text isn't covered by the red bar, I would like that text to remain black.  I was thinking a blend-mode might do this, but alas it seems not, because there isn't a blend mode that would turn the text from black to white (as far as I can tell).

I'm kind of thinking this isn't possible?  But I thought I would ask here in case.

Kind regards,

Paul

See the Pen JLNJKW by pauljohnknight (@pauljohnknight) on CodePen

Link to post
Share on other sites

Moving an object over another object is certainly in GSAP’s wheel house. Having one object affect the color (not with respect to blend modes) of another where an overlap occurs sounds like a good use of CSS masks and positioning.

  • Like 3
Link to post
Share on other sites

I love SVG clip-paths or masks for this type of work.

 

See the Pen ZxKymB by PointC (@PointC) on CodePen

 

Pretty much the same thing I did in this demo except the text is linked to the timeline progress.

 

See the Pen pydXLG by PointC (@PointC) on CodePen

Hopefully that helps or at least gives you some ideas. Happy tweening.

:)

 

  • Like 6
  • Thanks 1
Link to post
Share on other sites

Oh boy, that's a total brain freeze :-D. Thanks for the example @PointC, I think I'm going to have to do some proper background reading there.  I've not used SVG clip-paths or masks before.

Paul

  • Like 3
Link to post
Share on other sites

@PointC, is there a way to achieve this effect more dynamically? What I mean by that, is say I have a fixed logo on a page and as the user scrolls the background colors change from section to section. So you have a white section, then a black section, then a blue section or something like that and as the background is passing through the fixed position where the logo is, the logo would "detect" what color is behind it (parts of it or all of it) and adjust accordingly, meaning on a dark bg it would reverse to white and on white back to black.

 

I've seen this done before, but I'm not sure what people use for it. I'm guessing that you can set some sort of darkness breakpoint and make a decision to go light or dark based on that.

Link to post
Share on other sites

Hey @sammyg,

 

Here cool solution - if there was not the problem 'quite jittery in Safari'.

 

See the Pen VGPdyJ by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 2
Link to post
Share on other sites

Hey all, the above approaches look like nice approaches. ;—)

 

Since I happened to notice the old OP mentioned blend-modes, maybe “mix-blend-mode: difference;” would be applicable for some? You can make that go from white to black and reverse. Except regarding the various still lack of browser support sadly. :—(

https://css-tricks.com/reverse-text-color-mix-blend-mode/

https://caniuse.com/#feat=css-mixblendmode

 

Midnight.js (or others) might be another option for some.

http://aerolab.github.io/midnight.js/

 

You could probably even just use a small function to determine if it needs to be black or white, etc., and conditionally pass that reference into a tween to make a smooth transition between colors across sections on scroll. Here is one example of determining color.

https://stackoverflow.com/a/35970186

 

¯\_(ツ)_/¯

  • Like 1
Link to post
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.

×