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! 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
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.
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