Will stroke dash animations be supported in the future?

[Mark - Yello Studio]

Similar to After Effects dashes animations on Strokes, or SVG dash array and offset animations... I'd really like to see the same thing brought into Animate CC.

The technology is already there. I can adjust the dash count and dash spacing in the Stroke Style panel... but these properties can't be animated.

Animating a single striate paths with Shape Tweens is the only workaround, but it's extremely limited. Maybe I'm just missing something and support is already there?

[Myra Ferguson · Accepted solution]

In Animate, stroke isn't a property that you adjust in the same way. You could request that feature by submitting it here Feature Request/Bug Report Form

That's not to say you couldn't achieve the effect in Animate. The way I would go about it would be to use a motion path that I would put in a graphic symbol and then use as a mask over a duplicate of original path.

[ClayUUID]

I tried hacking some marching ants into Canvas mode by hooking into the canvas.stroke() method, but it turns out that Animate Canvas documents don't use the HTML5 canvas dashed line API. What happens instead when you set a dashed line style is that it publishes the line as dozens or hundreds of individual line segments.

Mediocre, Animate. Mediocre.

[just.emma]

I agree that this would be an amazing feature!  (Not sure how possible it would be for them to implement though.)

[ClayUUID]

Just for fun, here's a proof-of-concept of how animated dashes could look in a Canvas document. Paste the below code in anywhere on the main timeline, draw some solid lines, then run.

canvas.getContext("2d").stroke = function() {

    var dashLen = 10;

    var gapLen = 15;

    this.setLineDash([dashLen, gapLen]);

    this.lineDashOffset = (Date.now() / 30) % (dashLen + gapLen);

    CanvasRenderingContext2D.prototype.stroke.apply(this, arguments);

}

This forces every line to be an animated dash, so it's not really useful.

[Mark - Yello Studio]

Thanks for sharing this ClayUUID.

I wouldn't know where to begin with this, but proof-of-concept is exciting. It further adds to my suspicion this is quite an accomplishable feature. I've submitted this as a feature request, so lets hope it amounts to something.

Thanks again,

Mark