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.

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?

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