Jump to content
GreenSock

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

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

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 post
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 post
Share on other sites

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 post
Share on other sites

Awesome! I knew there had to be a better way to do that over using a filter. 

 

And congrats on your promotion to moderator! You definitely deserved it.

  • Like 3
Link to post
Share on other sites

Thanks Blake. :)

 

I have a lot of fun and learn so much around here - it's truly an honor to be included with you guys on the moderating team.

  • Like 1
Link to post
Share on other sites

You guys are too awesome! (Tears)

  • Like 2
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.

×