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 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.
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?
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.
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.