Feature Request: Controlling animation speed

[kevinmichaelchen]

Is something like this possible?

style: {
  animated: true
  # integer between 1 and 10
  animation-speed: 5
}

[alixander]

Hmm no. Is there an example you have where it's too fast/slow? Or are you trying to do something different

[kevinmichaelchen]

The example I have in mind is to diagram a race condition. The varying speeds could be helpful in emphasizing which part of the race condition typically wins.

On Thu, Nov 2, 2023 at 11:13 PM Alexander Wang @.***> wrote:

Hmm no. Is there an example you have where it's too fast/slow? Or are you trying to do something different

— Reply to this email directly, view it on GitHub https://github.com/terrastruct/d2/issues/1698#issuecomment-1791844313, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABHEOCWNIVZKOV3PZVEVEJ3YCROOFAVCNFSM6AAAAAA63EQCIGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJRHA2DIMZRGM . You are receiving this because you authored the thread.Message ID: @.***>

[alixander]

That's a good use case. @gavin-ts thoughts on introducing a new keyword here?

[gavin-ts]

I think being able to control this speed to makes sense:

https://github.com/terrastruct/d2/assets/85081687/7c612b00-acf0-4a88-ab0a-47ae58d0577e

• I wonder if we really need both keywords though or if we should simply replace animated: true with animation-speed: 1.
• I also wonder if we can make it less verbose somehow (e.g. animate: 1.5x or speed: 2)
• Range of values that could be [-10,10] (negative for reversed direction?).

[alixander]

I intentionally choose the less common words, to avoid conflict, which usually means more verbose.

Nah no need for negative I think. But a float value makes sense.

Maybe we just change animated to be a float.

[gavin-ts]

I intentionally choose the less common words, to avoid conflict, which usually means more verbose.

just talking about making about animation-speed less verbose not animated (but conflict shouldn't matter within style)

Maybe we just change animated to be a float.

an example to be clear:

a -> b: {
  style.animated: 1.5
}

I like that it is less verbose than animation-speed, but slightly dislike that it doesn't really read very grammatically.

other options for comparison:

a -> b: {
  style.animation-speed: 1.5
}

a -> b: {
  style.speed: 1.5
}

maybe animation-speed is the clearest even though its a little more verbose

[kevinmichaelchen]

just checkin back in

[alixander]

another use case is slowing down animations when too many

https://stackoverflow.com/questions/53399421/svg-animations-sluggish-poor-performance-in-chrome