How can I play multiple gifs in sync? (Reactjs)

Question

I am building an app that displays a customizable avatar using overlayed divs with CSS background sprites that are gifs. Currently, I am setting the background image using inline component styling, like this:

<div id="head" style={{backgroundImage: `url(${headSheet})`}}/>

<div id="hat" style={{backgroundImage: `url(${hatSheet})`}}/>

This works most of the time, but occasionally when loading the page the gifs will not start at the same time and so the animations will not be in sync. I have tried these solutions:

• Load and display multiple animated gifs at the same time (synchronised) with Javascript

• How synchronize more gif pictures?

but they did not work for me. They are also fairly old, so hopefully there is a more modern solution using React.

Answer 1

Really, you won't be able to do what you want consistently with an animated gif, or set of gifs.

You should probably break each frame into a separate gif/png (you can do transparent png at <= 256 color palette with alpha transparency, so may be a better option). Combine this with a canvas, and control the swapping via JS. Look into window.requestAnimationFrame as well for your control flow.

You should combine this with the useEffect hook to register/unregister your animation shifts. You will likely want to manipulate the canvas element directly (useRef) as opposed to having React handle (re)renders.