Line Draw In with Draw Out?

Since the introduction of the line draw feature along with vector addition it made Hype 4 what it is today, a fantastic app one that in most ways mimics AE. That said, theres one thing that the line draw doesn’t do now and that is the line draw out. Meaning, If we start a line draw in a specific direction we can’t draw out the animation in the same direction. Theres a workaround by copying the layer and stacking it up and changing the stroke color and value to that of the background as seen in the thread here however, its a bit of laborious process doing this with many letters. Im hoping there’s a slider to draw out the animation? If theres a behavior script that I can run by pinning it within the timeline that would be great too. This way I don’t have to create a new layers to cover the line with?


This was something I was looking to recreate in Hype

Hei Pete,
I´m not sure, whether you mean something like this? If so, just animate the line to 200% in length for the end keyframe… (11.9 KB)

1 Like

Very, very, close though not exactly what Im trying to achieve. I want the draw out to happen while the draw in is still animating? Take a look at the video.

The trick animating to 200% is very intriguing. Im not sure if this was something @jonathan had in mind. that looks like a bug that was never brought to anyones attention :slight_smile:

1 Like

It´s not a bug, it´s a fea… :grinning:

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 :slight_smile:

Just kidding :grinning: I think, it´s definitely a bug. Kind of… (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.


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: (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

Heres my interpretation. (9.7 KB)


Still confusing and not user friendly… :thinking:

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 :slight_smile:. 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. :smiley: 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