I was looking for an easy to use GIF player to play a GIF made out of a few screenshots. In the end, I decided to just make a compoment that takes in a list of image URLs, preloads them and plays them when playing the play button.
Features:
- Loads first frame first, then the rest of them
- Loading indicator while loading all frames
- Seperately configurable pauses between frames and after a loop
Usage:
<AnimationFrames
width={1614} // explicitly set dimensions so we don't get jumping while loading
height={1250}
playSpeed={1000} // miliseconds between frames
loopPause={2000} // miliseconds between loops
frames={[
"/frame-1.png",
"/frame-2.png",
"/frame-3.png",
]}
/>