Share Posted April 6, 2016 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
Share Posted April 6, 2016 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. 2 Link to post Share on other sites
Solution Share Posted April 6, 2016 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. 5 Link to post Share on other sites
Share Posted April 6, 2016 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. 3 Link to post Share on other sites
Share Posted April 7, 2016 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. 1 Link to post Share on other sites
Author Share Posted April 8, 2016 You guys are too awesome! (Tears) 2 Link to post Share on other sites
