Dynamic looping of image animations in React. Define an animation with urls or paths, specify a duration, and the animation will repeat for that infinite iterations. You can not change the number of iterations programmatically.
https://infiniteloop-b377c.firebaseapp.com/
import React, { Component } from "react";
import InfiniteLoop from 'infinite-loop-animation';
class App extends Component {
render() {
return (
<div>
<InfiniteLoop data={urls} background={bg} duration={1200} size={65} />
</div>
);
}
}
const urls = [
"https://image.flaticon.com/icons/svg/413/413850.svg",
"https://image.flaticon.com/icons/svg/413/413826.svg",
"https://image.flaticon.com/icons/svg/413/413808.svg",
];
const bg = ["http://samherbert.net/svg-loaders/svg-loaders/puff.svg"];
export default App;
An array of images
Background image path or url
Time between each frame in milliseconds
Recommended values between 25 and 250
MIT