Had to do some similar animations recently. Wrote up a super simple function that can be combined with any easing function, and where you're in full control of

Had to do some similar animations recently. Wrote up a super simple function that can be combined with any easing function, and where you're in full control of the animation progress. It's not specific to SVGs and doesn't do very much on it's own. Thankfully, you can use off-the-shelf easing functions and higher-order functions to have time/frame/whatever-based animation progress (e.g. as an advanced example, i actually utilised the accelerometer as input for animation progress) Check app.js for example of fading element's opacity and animating an SVG path https://gist.github.com/WickyNilliams/af30ad9b1557f894efab https://gist.github.com/WickyNilliams/af30ad9b1557f894efab