Apply auto-animate to background-image in revealjs

[stephan-koenig]

Description

Hi all!

I would like to animate a fullscreen background image to slide from the top end towards the bottom.
Is it possible to apply auto-animate to a background-image. The code below does not seem to work. I see either the top or the bottom of the images, but there is no transition between the slides.

---
title: "Auto-animate does not seem to apply to background image"
format: revealjs
---

## {background-image="image.png" background-position="top" auto-animate=true}

## {background-image="image.png" background-position="bottom" auto-animate=true}

Thanks!

[mcanouil]

I don't think you can (animate is for content not for layout component such as background), but since it is HTML, you could try to make this work using CSS/JavaScript.

[jimjam-slam]

You could use a parallax background instead! Here's one I did using a very narrow picture of a gradient (slides, code):

Screen.Recording.2023-11-28.at.16.45.43.mov

You just need a very wide or very narrow background 🙂 Here's the Quarto doc frontmatter (I used the slide transition to complete the illusion):

format:
  revealjs:
    width: 1300
    controls: true
    transition: slide
    theme: [default, style.scss]
    parallax-background-image: narrow.png
    parallax-background-size: "28px 6000px"

[stephan-koenig]

Thank you for sharing your approach, @jimjam-slam!