Lottie-web: Change color of icon based off the progress of the animation

[aditya2705]

I'm trying to change the color of an icon while it animates from non-slash to slash animation. I want it to change from black to white. I'm not sure how to go about it. https://jsfiddle.net/49z5rnjf/260/

Can you help as to how I can achieve it?

[bodymovin]

Hi, can you animate the color change in after effects?

[felippenardi]

@bodymovin Although changing the color in After Effects would could do the work here, I was curious to know how you would approach changing the color at runtime.

Would you use lottie-api or is there a way to do it in lottie-web without an extra dependency?

[bodymovin]

the most straightforward way is doing it with lottie-api.
Trying to do it manually means traversing the json tree and making sure it has keyframes to modify.
Another option might be using css targetting the element via javascript.

[aditya2705]

If I were to target the element using css, how do I do that with respect to the progress of the animation? For instance, in the link I shared, I'd like the icon to change color gradually depending upon the progress of the slash animation

[bodymovin]

You can add an event listener to the animation.
anim.addEventListener('enterFrame', function(ev){})
the event contains the current frame and total frames of the animation

[aditya2705]

Thanks @bodymovin! That seems really helpful. And how would I get the particular element? Through the renderer? I'm asking this because changing anim.renderer.elements[0].data in the js (of link I shared) doesn't really affect the actual element. (The element I'm concerned with is elements[0] i.e. the camera icon) It'll be really helpful if you could show a working example. A lot of people have the same issues.

[bodymovin]

If it's not keyframed, you won't be able to update the value.
Via js, you can name the layer in AE with a . or a # and it will add a class or an id to it.
Do you have access to the ae project?

[aditya2705]

No, I do not. The only other option if this does not work is to ask our motion designer to create new animation (with the color transition). I can probably ask them to name the layers in that case. I just hoped to do this color thing without any other dependencies (though lottie-api is useful indeed)

[aditya2705]

Hi @bodymovin, is there a way to remove the fill attribute from the rendered svg path by removing some lines (corresponding to type - fill) from the animation json? My icon would disappear if I removed the entire "{'ty":"fl" ... }block.

[bodymovin]

@aditya2705 yes, you can delete the object of "fl" type and it won't be rendered.

[aditya2705]

I've been able to resolve this by adding class with a "." and then changing the color during the animation with the "transition" attribute. Thanks for all the help. Closing this.