🏠 back to Observable

Animating Path

Hi! I’m trying to implement an animation for my graph:

where instead of having the lines “fade in”, I want each line of the graph to appear from left to right. I’m having a bit of trouble accomplishing this, and would appreciate any help!

Apparently there is a bug in Safari—it works well in Chrome and Firefox. If you take just a subset of the points (one every 5 steps), it works well in Safari too.

1 Like

A secondary issue is that if you interpolate relative to the length of the path, the lines will not animate exactly in parallel; in this case the simplest strategy is probably to use a clipPath (I’ve sent you a suggestion). And it solves both issues :slight_smile:

1 Like

Thank you good sir!!