Jump to content
Search Community

Animating fill color to match background color as you scroll down the page.

venn test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am not sure if here is the best place to ask such question.
But I have very little clue where to start with this and would appreciate if someone could point me to the right place.

 

And not sure what's the best search term for this.

 

I am trying to re-create such typography effect. If you look at "Organic", it changes fill color and spacing as the user scroll down the page. The fill color is filling half way in the text.https://dribbble.com/shots/2623261-Landing-Page-Animation

 

Can GSAP alone achieve this? Or do I need to combine it with CSS? or SVG?

What is the best technology for this and where should I be investigating?

 

- - -

 

*Updated: I have found the article for it. It is done with CSS. I wonder GSAP can do the same too?

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

Link to comment
Share on other sites

Here's the answer to every, "Can GSAP do this or do I need to use CSS?" question. Yes, GSAP can do that. Most things are going be pretty straightforward. If you're using pseudo elements like that article is doing, you might need to use the CSSRulePlugin.

 

Would I recommend taking the CSS route for this animation? Nope!

http://caniuse.com/#search=mix-blend-mode

 

SVG support is much better. Search around the forum for SVG filters. @Jonathan has a lot of demos showing how to animate them.

 

When all else fails, canvas can render anything.

  • Like 2
Link to comment
Share on other sites

  • Solution

Hi venn :)

 

Yep - Blake is right - GSAP is going to be able to do what you need and it's going to blow the doors off CSS animations. You have to remember that GreenSock is animating numeric values. It doesn't care whether you use SVG, canvas or plain old divs. It can handle your animation needs.

 

I took a look at the link to the CSS Tricks demo you provided. (which isn't working correctly for me in FF for some reason) That color reverse should be pretty straightforward. My opinion -  inverting the fill color of text like that looks like a perfect use case for SVG masks. You can then activate it via a scroll, click or whatever user interaction you like.

 

I put together a little demo for you. I thought the easiest approach was to create a duplicate text node that is revealed by the mask. I threw in some color change swatches for you as well. Please take a look as I think it can give you some ideas.

 

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

 

Hopefully that helps a little bit.

 

Happy tweening.

:)

  • Like 5
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.
×
×
  • Create New...