Skip to main content
Mark - Yello Studio
New Participant
June 7, 2017
Answered

Will stroke dash animations be supported in the future?

  • June 7, 2017
  • 4 replies
  • 1573 views

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?

This topic has been closed for replies.
Correct answer Myra Ferguson

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.

4 replies

Brainiac
June 7, 2017

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
New Participant
June 12, 2017

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

just.emma
Inspiring
June 7, 2017

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

Brainiac
June 7, 2017

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.

Myra Ferguson
Myra FergusonCorrect answer
Community Expert
June 7, 2017

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.