Repeat/loop animation

[volks73]

Great tool! Thank you for the creating it.

I was wondering if there is some way to enable looping/repeating the animation? If it is currently not possible, would it be possible to add a feature/option to enable and disable repeating?

[gpoitch]

@volks73 it does not currently have the ability to loop, that would be a new feature. It should be possible - the app does all the calculations for the css animations based on the content. You'd just have to do the math for animation delays.

Depending on the context in which you use this, you could just add your own javascript button that removes/re-adds the term-sheet and it should play again.

[volks73]

I would like to use the SVG in my GitHub README. I don't think it is possible to include javascript for a "restart" button. The <img> tag needs to be used.

I played around a little bit with the animation-iteration-count: infinite; property, but it does not work as I expected. Do I need to add the property to all of the tags with an animation delay? Admittedly, I am not very familiar with modern CSS and CSS animations.

[gpoitch]

Unfortunately not just a simple css property to set that would make it work. It'd be a bit of math, similar to how the animation-delays for each letter are calculated based on the content.
I think you'd have to dynamically generate keyframe animations for each letter that so it has the appropriate waiting period before looping. See: https://css-tricks.com/css-keyframe-animation-delay-iterations/.

[volks73]

Thank you for the information, link, and help. I will play around a little bit more, but I am okay if you would like to close this issue. I am not sure how useful a looping function would be for anyone else.

[gpoitch]

Seems like a useful feature so I'll leave it open.

I just came across this app, and it seems like a really useful tool, the one thing I was looking into was how I could continually loop an animation for example

input: 'spinners via "replace"', output: [ { content: '| Loading', replace: true }, { content: '/ Loading', replace: true }, { content: '- Loading', replace: true }, { content: '\\ Loading', replace: true }, { content: '| Loading', replace: true }, { content: '/ Loading', replace: true }, { content: '- Loading', replace: true }, { content: 'Complete' }

Let's say for instance I wanted to make an app that dynamically would update output, like an ongoing Terminal. Between receiving new data for it to output I'd love to loop some sort of loading spinner or icon before the new output content would be available to display. Do you have any thoughts on how this might be accomplished using this library. I'd honestly be interested in opening a PR just to implement a feature like this because it seems really practical. Any thoughts?