Animating Font Awesome Icons

[Justiniscoding]

How do you animate font awesome icon colors with a GSAP tween? For the color, you have to change the color html property. So, I'm wondering how I can animate the html property, or animate a javascript variable that has a getter that automatically also updates the HTML property

[GSAP Helper]

Hi @Justiniscoding and welcome to the GSAP forums!

 

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Justiniscoding]

OK, you can find the project at: https://stackblitz.com/edit/vitejs-vite-zegpxi?file=src%2FApp.svelte

It's a div containing some icons from font awesome that are meant to be my socials(for my website). When I hover on the first one(I didn't implement the functionality for all of them, as it would make the code less readable) I want it to get bigger(which is successfully implemented with a tween) but I cannot get it to change color. The color of the element is controlled by the HTML property `color` and not the css one. This means that when I try to animate the color in the tween, it does not work because it tries to change the css property which has no effect on the icon. How can I animate the html property and have the color change to a different one on hover?

[GreenSock]

Hi @Justiniscoding. It looks like you forgot to fork the demo and save it with your changes - the link you provided is just our original starter template. Or am I missing something? 

[GreenSock]

By the way, I'm not at all familiar with Font Awesome, but I googled and quickly whipped together a simple CodePen that shows that it seems to work fine with animating the color using GSAP: 

See the Pen rNPxZvp by GreenSock (@GreenSock) on CodePen

[Justiniscoding]

Ok, I forked it and this is the new link: https://stackblitz.com/edit/vitejs-vite-grg2ry?file=src%2FApp.svelte. It seems like this library I am using for the font awesome icons needs me to animate the html property instead of the css one.

[GreenSock]

Ah that's because apparently the FontAwesome component just looks for that attribute when it CREATES the internal SVG stuff, and applies it as the "fill" attribute on those SVG <path> elements. So even if you change that HTML attribute dynamically, it won't actually do anything. So having GSAP animate that also won't do anything. You'd need to animate the "fill" on those paths: 

 

https://stackblitz.com/edit/vitejs-vite-nkzl6x?file=src%2FApp.svelte

 

Notice that if you simply control the color the normal way through CSS, it all "just works" and you don't need to do any workarounds - remove the fill animation in my code (2nd tween) and notice that your other two icons animate exactly as they should. So the problem here only happens when you define the color via that attribute (instead of CSS). Is there some reason you're trying to set that via the attribute instead of normal CSS? I mean GSAP can obviously handle it either way, as I show in my forked demo, but it seems a little odd to have to add an extra tween to work around how Font Awesome is overriding things. 

 

Does that clear things up?