How do you animate a self-drawing line using only one layer?

[kjetil_frugaard]

Looking for a simple way to animate schematics. And since I want to export it as interactive HTML5, Animate is perfect for the job. In After Effects they have this Trim Paths effect and this is exacly what I want. Can you do something similar in Animate as well, or am I stuck using motion tweens or masks on multiple layers?

[JoãoCésar]

Hi.

As far as I can tell, right now the only way is to use masks and/or delete strokes and fills progressively by hand.

Or maybe we're gonna be lucky and someone will take the challenge to create an extension to handle this kind of animation.

Regards,

JC

[kjetil_frugaard]

To bad the trim paths tool does not exist in Animate (yet). Let's hope it gets implimented at some point. It would be a real timesaver.

[JoãoCésar]

It certainly would!

[ClayUUID · Accepted solution]

Adobe never even implemented trim paths in Flash Player. The odds of them ever being implemented in Canvas are exponentially less, because HTML5 canvas has no native support for that sort of thing.

[kjetil_frugaard]

Yeah. I know. Been wanting this feature since back in the Flash days, but always done it the hard way or used AE if that was an option. Can't really understand why it's never been implemented though. It's such a basic animation and I would think a lot of people working in Animate want this.

Does HTML5 canvas support the motion, shape and classic tween natively, or is it just some Animate wizardry that impliment it into the HTML5 code?