Avoid Reload of a slide to go to the first slide

[grumpyf0x48]

Hi,

I use animated GIFs in Marp slide.

When i want to play the GIF again while presenting, i need to use Ctrl-R in the browser to reload the slide.

It has a strange effect to first go to the first slide before returning to the current one reloaded :-)

Is there a way to avoid this unwanted step.

Thanks !

[yhatt]

Marp's HTML slide is one simple HTML file, so if you request a full page reload, you cannot avoid the first page being briefly displayed until the assets for each slide have finished loading.

Therefore, it would be more efficient to reload only the specific GIF image, to restart the animations from the beginning. In exported HTML slide, writing a script like the following allows you to click on a GIF image to reload it, prompting a replay. (Allow using HTML tags and scripts on Marp tools you are using. Depending on the browser's cache situation, there may be cases where the replay does not occur).

![](https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif)

<script>
<!--
document.addEventListener('click', (e) => {
  const gifImage = e.target.closest('img[src*=".gif"]');
  if (gifImage) gifImage.src = gifImage.src;
});
-->
</script>

Note

For many years, browsers have not provided a clear way to control the playback of animated GIFs. If you need to control playback of animation, it is recommended to use the <video> tag and appropriate video formats instead.

<video src="animation.mp4" muted autoplay playsinline loop controls>

• References:
  • html - How to replay an animated GIF in javascript (vanilla) - Without JQuery - Stack Overflow
  • Replace animated GIFs with video for faster page loads  |  Articles  |  web.dev
  • Improve Animated GIF Performance With HTML5 Video — Smashing Magazine

[grumpyf0x48]

Thanks a lot for the answer and the code that does exactly the job 🎉