[SOLVED] Synchronize two separate .GIFs to play at the same time without JS?

Synchronize two separate .GIFs to play at the same time without JS?

I'm working on creating a somewhat complex custom CSS page for Itch, which restricts me to using only CSS and HTML—no scripts allowed.

I'm facing an issue where I need two separate GIFs to play simultaneously. These GIFs have the same duration and are designed to complement each other, so syncing them is important. Unfortunately, combining them into a single GIF isn’t an option.

The problem lies in how browsers handle GIF loading:

GIF 1 often loads and starts playing faster than GIF 2, but this behavior isn’t consistent—it varies across reloads.

Does anyone know if there’s a way to sync the playback of these GIFs or force them to start together using just HTML and CSS? I’m running out of ideas here, so I’d really appreciate any suggestions from a front-end expert.

Solution

You might try to preload your images. Please read the article @ MDN

img {width:40vw}

<head>
  <meta charset="utf-8" />
  <title>Image preload example</title>

  <link rel="preload" href="https://cdn.pixabay.com/animation/2023/05/20/21/52/21-52-42-295_512.gif" as="image" type="image/gif" />
  <link rel="preload" href="https://cdn.pixabay.com/animation/2024/01/28/21/36/21-36-44-257_512.gif" as="image" type="image/gif" />
  
</head>
<body>
    <img src="https://cdn.pixabay.com/animation/2023/05/20/21/52/21-52-42-295_512.gif" />
    <img src="https://cdn.pixabay.com/animation/2024/01/28/21/36/21-36-44-257_512.gif" />
</body>