It´s not a bug, it´s a fea… 
1 Like
Is it really? Who would’ve thought? if its at 200% its starts animating the draw out once the draw in is completed? Its def not in the manual 
Just kidding I think, it´s definitely a bug. Kind of…
drawOut-PB.hype.zip (10.4 KB)
The trick to visually nailing it is not to have the middle keyframe at 100% maybe more so at from 45-75% and modifying the “out” slightly faster this balances everything out at 200% all at linear ease. That said, its still not the same effect, I still think we need another slider to control the “out” as separate operation since the effect/result is dramatically different.
1 Like
Yep! Definitely.
Line Drawing using percent is just math under the hood fiddling with stroke-dasharray and stroke-dashoffset. Using percent at this point is not native to HTML and done by the runtime. So percent is dynamically mapped to dashoffset with 100% being the length of the line.
2 Likes
Any Idea on to how to control the stroke via code to start draw out at a particular point say half way draw in and half draw out?
You can always just switch to line dash mode and play around with the values… and animate them …
Hovering over Line Dash also gives you the needed length.
200% works because the line draw and line dash are equivalent lengths.
This example shows a small dash:
path.hype.zip (16.4 KB)
dash length: 40
dash offset: the path length = 612 (via hovering over “line dash” as @MaxZieb mentioned )
starting offset keyframe value = (dash length)
ending offset keyframe value = -1 * path length = -612
Still confusing and not user friendly… 
I somewhat agree, though all said and done, Im thankful this feature/option exists in whatever way it was designed. Hype is still by far a great tool and this isn’t a show stopper by any means. One day it’ll only get better. - Positivity goes a long way.
1 Like
This line draw feature is a hack to begin with even when using The official line dash array and line dash offset (meaning without the runtime magic) we are still talking about dashed lines. Hence the whole thing is a visual drawing workaround on a feature meant for dotted borders.
1 Like
Dash mode is a direct correspondence to SVG’s dash, gap, and offset values, so we’ll pass the confusion blame to them . We implemented Line Draw as a mode specifically because this is not easy to work with, so I could see adding features to that to better control tasks like this (primarily using a percentage and getting the directionality sensible).
Well I guess when you put it that way it does make sense it being a hack and all, thus a valid statement. @Jonathan did a good job at making the best of it within the limits and beyond.
Ok, I think, I´m gonna spend some time on this matter. I learned so immense much in this great forum - think I`ll get this handled, too. 
Since this technique implies a lot of capabiliies in terms of infographics…
By the way, I was once playing around with SVG filter but actually also added some custom dash array code on the side in this example (thought this my help as we are on the topic of dashes):
PS: The slight snapping at the end has been fixed since the example was made (Beta-Times).
1 Like
It’s great that tumult forums has someone of your stature here to extend hype beyond its capabilities. That said, Integrating something of this nature into hypes ui without extending with code would’ve been the ideal solution. (Wishful thinking)
1 Like
+ Define this in the quoted sentence.
Do you mean an interface to define a custom dash array beyond the first two entires?
Oh I don’t know 
I guess the obvious stuff? The screenshot below makes it seem as though its more of an experimental process. Don’t get me wrong, I love what you did its more of a hands on coding approach and is brilliantly clever. Now since you’ve gained the insight on using the svg filter, the next obvious step would be if Jonathan can make it a reality in the future to extend it via Hypes UI so everything is done behind the scenes and one can actually keyframe it, play it back, interact with it - Instant gratification kind of a process or I as I like to call it “Hype UI Gratification Process”? So Many questions, no answers
1 Like