dai-shi/excalidraw-animate

Allow looping?

Neo42 opened this issue · 7 comments

Neo42 commented

Is there any possibility to set if the SVG animation should loop?

I made a diagram animation with excalidraw-animate for one of my blog posts. Since it only plays once, the animation is already done when readers scroll the page down to where the diagram is. It would be nice if it's possible to allow it to loop itself.

Thanks.

dai-shi commented

So, do you embed an svg file in your blog post? If you don't mind, can you share?

dai-shi commented

implementation memo: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin <syncbase-value> might help...

Neo42 commented

So, do you embed an svg file in your blog post? If you don't mind, can you share?

Thanks for replying! Here is the svg file and the corresponding blog section.

implementation memo: developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin <syncbase-value> might help...

Thanks for the hint. Will look it up.

dai-shi commented

Cool. You use <object>. Yeah, that's only the way to make it work.
If you want to solve it quickly on your end, you want to add JS in the svg.
I can look into it later.
To fully support this feature in the tool, it would require quite some effort.

  • 🚀1
dai-shi commented

OK, it works. Add this JS code in the svg file.

    setInterval(() => {
      document.getElementsByTagName('svg')[0].setCurrentTime(0);      
    }, 18 * 1000);

fiber.zip

You could also restart animation on click if you want.

Neo42 commented

OK, it works. Add this JS code in the svg file.

    setInterval(() => {
      document.getElementsByTagName('svg')[0].setCurrentTime(0);      
    }, 18 * 1000);

fiber.zip

You could also restart animation on click if you want.

Wow, you are awesome! Actually, restart on click might be a better idea! Thanks again!

Guess my problem is solved. Should I close this issue or do you want to use this as a feature request for later?

dai-shi commented

That's good!
Good question. Well, let me close this, as I won't work on it meanwhile and it would require refactoring.

  • ❤️1