gif work with `animated` keyword

[alixander]

Currently the animated keyword works on connections to make them appear animated in SVGs, but it doesn't work in GIF. GIF only works for multi-board diagrams.

Reasonable for GIF to work with just one board that has an animated connection.

[bo-ku-ra]

"d2.exe --animate-interval" and "style.animated: true" what are you going to do about the coexistence?

[alixander]

There's no conflict.

--animate-interval dictates how long the GIF lingers on each board. style.animated makes the line animated at a constant rate.

[bo-ku-ra]

i could not imagine that each one is animated in its own time interval in the gif file. but you said there was no problem. thank you.

[milon]

I tried this-

A -> B : "Animated" {
    style: {
        "animated": true
    }
}

Then export like this-

d2 test.d2 test.gif --animate-interval=1200

It the preview it works, as well as in the svg export. But for gif export, it doesn't animate.

I am on Mac by the way.

[pl4nty]

+1, a lot of apps (eg Slack) don't support SVGs. I'm working around it with an SVG->GIF service, but it loses tooltips

[HariSekhon]

I ran into this problem when trying to post a generated animated SVG to LinkedIn.

Need to convert to gif but d2lang's gif generation doesn't animate and also it loses the dark --theme 200 for some reason (issue #2138)

[alixander]

@pl4nty losing tooltips can't be helped, since gifs are images and images aren't interactive

[alixander]

dev notes:

The animation of the connection with the animated keyword needs to fully animate a loop within the specified animate-interval (i) duration. If we just take i divided by some frame rate (f) (e.g. 100ms divided by 5, take a screenshot at 20, 40, 60, 80, 100), it might look choppy since it doesn't loop perfectly.

So we should set the duration of one perfect loop to i?

But what if you have a number of boards, and you want to pause for 5s at each board, but for the animated connections to be animated at a faster pace than a super slow motion 5s loop?

We should keep the duration of animated unrelated to i. We can just choose a frame rate such that the first and last frame match.

---

edit: the way we capture PNGs is to load the SVG as an image into a canvas. As an image, it won't animate.

---

Also, maybe --frame-rate needs to be introduced in the future to control how smooth the animation looks.

[pl4nty]

@alixander thanks for looking into this. With third-party converters, I miss the nice tooltip legend that d2's gifs have in a footer. Actually stopped using animate a lot, because the legend is really useful