Can I create a growing curved line along a path?

Hi all,

I know I can move an object along a path. What I would like to do is to show a “growing growing line”. This could be for example the way of a ship going from let’s say London to New York.

Can I do that? Can I make it a dotted line?

Thanks a lot!


Depending on your line you can sometimes fake this by use a group to mask the path and reveal it, but there is no built in support for animated line drawing at the moment.

Hi Stephen, I have the same problem because I want to produce small geographical maps with simple growing paths on them (like a roads, for example). I have tried with masks but it doesn’t work, have you any other suggestion? It seems so strange that I can’t produce such a basic animation in Hype. It is a very nice app!

@macangelo You can do it with an external library called vivus.js - svg animation
VIVUS limitation: animations over one second lost sync , only few lines at a time,
Complex animation: disappointing performance on mobile devices and loss of synchronization when using Hype for the cast.

discussion and one of my examples

in any case you can’t use dashed line in this kind of animation.
For the dash line you can use a static line with animation in the internal offset. (no external library)

hope this helps