Any ideas on how the dotted line animation is done?
In this case you can do a build in with the Line Draw slider for a Vector Shape.
Then, if you duplicate the shape (and hide the line drawn one) you can do another animation changing the Line Draw popup to Line Dash. Give a dash, gap, and then you can record to animate the offset to be the sum of those two values. Then make sure the animation uses a linear timing function, and loop via timeline action.
1 Like
how did you get the line dash box to appear - have I missed something this whole time 
the two arrows: up and down. right next to the menupoint.
Please consider to visit Hypes online-documentation! This'll help you on many other topics. too 
Thanks Hans I thought I was on top of the documentation but clearly not - now Im confused
I can't get this to appear
Maybe I need more sleep
the arrows next to line draw ... those will swap the modus
1 Like
For visual learners …
1 Like
In the future versions of Hype I hope this would be easier to find. That little up and down switch is like a hidden feature almost and to be honest I forgot all about it. It’s also a bummer a user can’t animate it easily as they can with a solid line.
3 Likes
You can animate the values by changing them on different keyframes. Set the offset to a multiple of the combined gap values to get a nice endless animation. Loop it on a linear animation. Done!
You can use the rubber hose technique to achieve this with a live preview . I’ll tweak the code later today. Update: as promised, here is the implementation…
1 Like
For me personally Its like a hack almost. Like an experimental feature more than anything, the values are very hard to understand from a creators point of view but as a coder/wizard of your stature it’s piece of cake.
That said, I can relate to the individual needs in asking to animate the dash lines as easy as one can animate the non dashed line. Im hopeful that future version of hype can make it easier for folks animating the dashed lines with ease.
1 Like
I understand, although the dash array and offset interface is the native thing. You have to keep in mind that this line functionality originates in the HTML itself. Hence, the "Line Draw" feature is the Hype specific hack for creators to make it simple, not the other way around.
When thinking about what you said I had the following idea. It would be great to have three modes in Hype.
As dashArray can be an arbitrary length of comma separated values Hype has only supported two of them for animation and added the “Line Draw” feature in version 4. Supporting an arbitrary amount of fields would be a challenge for the the Hype animation engine and specially the UI if kept separate.
So, why as a compromise not have a third mode in that little drop down that only presents a simple text field for the dash array. Changing it while recording an animation wouldn’t lead to a smooth value to value animation but maybe just an all out replacement like innerHTML currently does.
1 Like
I don't know about a free-form field, but I'd definitely like to be able to support arbitrary dash/offset pairs. You're correct the fundamental issue is in animating between incompatible pair sets. There are some okay solutions to be used, but it would require a reasonable amount of runtime code. For initial vector shapes it wasn't clear if there was even going to be demand folks doing dashed paths to make this worthwhile, but now we know it is 
.
2 Likes
I can't help but feel that this is too obscure. I had to go digging through documentation to find out how to do dashed lines, and that should be something fairly intuitive. This paradigm is not obvious and doesn't follow UI conventions that most users would expect.
Perhaps a better interface would be for both options to be visible (I'd suggest "Line Completion") and maybe gray out the dashed line options if the slider is anything other than 100%? Not sure why you have to pick one or the other, I assume it's a limitation in CSS? I want to have my dashed line draw on!
1 Like
This is probably something you should direct at @jonathan
Just a fellow user helping in the forums 
1 Like
It is a common point of confusion we plan to address. Inspector design is hard 
.
Is there a specific application you feel gets it right?
Yes, it is using the same SVG property for both. But since coming out with the feature and this generally being a requested item, some forum members have discovered a method that should be able to be adapted to allow for both!
@jonathan Yes, that's a hard nut to crack. I think the trouble here is that even though it was a good solution to a tricky problem, the current UI lacks discoverability. In other words, you wouldn't think to look there if you didn't already know what that button revealed.
That's why I envisioned both options visible, but the dash controls being grayed out whenever the completion amount was less than 100%. Maybe even a tooltip or help button to explain?
But hopefully, the workarounds that users have discovered for enabling both simultaneously could be implemented under the hood, rendering the dilemma over how to handle the either/or functionality moot.
1 Like