Search code examples
animationsvgvelocity.js

velocity.js // animating svg fill from transparent to color

It obviously does not work :

Without specyfying the start color, it translates from white to the color specified.

If the start/end colors are specified with hex, same thing

If colors are specified with rgba values, with alpha at 0 for the start color, and alpha at 1 for the end color, there is no transition, it immediately get the end color

If anyone has clues or alternatives on this one (the point is to animate the svg fill color from transparent to color, don't care about velocity), that'd be great

Solution

  • Animate fill with hex values and fill-opacity from 0 to 1 paralelly.