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
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
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.
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.
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.
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.
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.
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).
Since this technique implies a lot of capabiliies in terms of infographics…