How to do a moving Stroke / Line


#1

Hi guys! I’m new here on this forum, but i’ve been using Hype for the past 2 years. Hope i’ve put my question in the good place! :slight_smile: I already red a topic that was similar to my question, but didn’t seems to have an answer.

My problem is that I have to animate a line, but don’t know how. In after effect, I’m importing the line from Illustrator, than in after effect i doing a stroke over it as a mask and give an start- ending animation to this stroke mask.
Someone is having an idea on how to do it

WHAT I WANT TO DO:


(Loves Hype) #2

Hype 3 can’t animate lines as it doesn’t support inline SVG (only as background image) or does it have a vector / line tool. You can do it in regular HTML using a library and some JS.

In the upcoming Hype 4 there is a tool todo such things but it works only on lines you draw with the built in tool and Hype 4 is currently in Beta (you may ask @Daniel or @jonathan to get access).

Also I see that you “line” has different patterns and gaps at specific locations. That is not trivial with the traditional line dash method used in all the ideas/hints above.

One thing you could do is import the red line as a SVG and then build a line on top with the same curve that is black and retracts and thereby reveals the red. This would require a black (or solid) background in production later, though.


(Loves Hype) #3

BTW you can use a tool like …

https://maxwellito.github.io/vivus-instant/

… in Hype 3


(Loves Hype) #4

If you don’t shy away from a little bit of code / class assignment you can use the example I wrote beginning of the year for Hype 3. It also supports easing … see timing functions


lineAnimationHype3.hype.zip (68,1 KB)


#5

Thanks you very much Maxzieb! I’ll have a look at it for sure!


(Jonathan Deutsch) #6

You are welcome to apply on this form. We send out new batches of invites every few weeks, but if you ping me I can accelerate this.