What are the Dash Offset, Dash Segment and Dash Gap Properties and can I animate them?

Hi Guys

I noticed that the Properties drop down includes the Dash Offset, Dash Segment and Dash Gap properties but I do not know how to actually change these and if these can be animated. I’m guessing all these refer to a shape with a Dashed Style right?

Thanks for your help!


Does that help? :slight_smile:



great examples!


Thanks for sharing these resources but I cannot see these options under the Path Options of my vector shape. I guess they probably become active when you select a style for your vector shape. However, when my vector shape option drop-down shows N/A.

Ok I got it. You need to change the draw to line dash!


Last question. When I animate the line draw property in a circle vector for example, the animation always starts from the top anchor point and goes counter-clockwise. Can I change this somehow (without having to rotate the vector) so that I can chose which anchor point is starts and which direction it goes?


posNegPathAnim.hype.zip (21.0 KB)
negative values

1 Like

There’s no built-in way to change which the starting anchor point is going to be, but you can get clever with the dash segment, gap, and offset values since these are animatable. In fact, the line draw setting just uses these under-the-hood.

First, note that if you hover over the line draw/dash popup menu, you get a tooltip that has the length of the path. This can be used for your calculations.

Let’s say you had 4 keyframes evenly spaced and wanted to start the animation at the 3rd one - this would represent 75%. If the Length value is 120.0, then this would be at the position of 90. So for this type of animation you’d use these values:

Segment: 0
Gap: 120
Offset: -90

Then you’d make an animation that changes the values to:

Segment: 120
Gap: 0
Offset: -90


(One small note is that it appears there is a bug with updating the first segment value - it will not immediately show on the editor. This has been fixed for the next version of Hype. A workaround is to modify the dash gap or offset value and those will update the entire path)


Thanks Jonathan! That’s very helpful. I was about to ask how would I guess the pixel size of the shape I’m trying to animate but you already answered that.

One more question. How would I achieve this effect where a dashed path just reveals itself as I’m struggling to do that. The Line Draw option can only be used on a non-dashed path and the style option for the vector path says N/A.


Thanks for your help!

Hi Greg!

Using the “Dash Offset” property on the Timeline is one way to animate a dashed “reveal”.

Hype Document: Dash Animate Exper.hype.zip (15.4 KB)

1 Like

Thanks Jim! Is there a way to animate it in a way that the dashed curve reveals itself from 0 dots to full length like in the gif above?

Hype does not support ‘progress’ for a dashed stroke.
This would require a possible dasharray like:
5 5 5 5 5 5 5 5 5 5 5 5 0 110
means a dasharray not being restricted to one draw and one gap.

you could fake the effect by masking the path … or use one of the techiques described here -> https://forums.tumult.com/t/use-vector-shape-as-animation-path/11751/20?u=h_classen

1 Like

Thanks for sharing the link Hans. However, it says it is private :slight_smile:

sorry you hit this …

apollo8_animatedDash.hype.zip (609.4 KB)
the original doc is from @ktewes who asked for the same kind of information …

you can also specify a dasharray via css … -> one possible info: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray there are plenty :slight_smile:


revealDash.hype.zip (12.1 KB) funny thing :slight_smile:


Thanks for sharing. I like the colour change!

I managed to find a solution to the dotted line reveal without code. I simply duplicated the curve and covered it with the exact same one but white.

Simple dotted line reveal.zip (27.5 KB)


the original doc is from @ktewes who asked for the same kind of information …

I like how he made the rocket hide behind the earth and the moon while orbiting them :slight_smile:


I think this new solution from @h_classen can do what you want in cases where simple covering won’t suffice:

1 Like