How do I zoom into an image through animation (instead of Alt + left click)?

[KrisKarul]

Description

Currently the only way I can think of making the image zoom in first before going back to normal is a nested fragment, however the growth size is not big enough and not in the center of the slide.

However, I realised that Quarto revealjs allows the use of Alt + Left click on anywhere to zoom into that part before zooming out after the next click. I was wondering, is it possible to animate it so that it will always zoom into that particular area that I want?

---
title: "MY TITLE</br>"
author: "Kris"
format: 
  revealjs:
    theme: dark
    transition: none
    navigation-mode: vertical
editor: visual
---

## My Heading

:::: columns

::: column

::: {.fragment .grow}
::: {.fragment .shrink}

![](https://img.freepik.com/premium-vector/tree-with-tree-top-it_1167562-4598.jpg?semt=ais_hybrid)

:::
:::

:::

::: column

**SUBTOPIC TITLE**

Some text here

:::

::::


## 

Quarto 1.4.553
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.4.553
      Path: C:\Program Files\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[>] Checking LaTeX....................OK
      Tex:  (not detected)

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK
      Version: 3.12.3
      Path: C:/Python312/python.exe
      Jupyter: 5.7.2
      Kernels: python3

[>] Checking Jupyter engine render....OK

[>] Checking R installation...........OK
      Version: 4.3.1
      Path: C:/PROGRA~1/R/R-43~1.1
      LibPaths:
        - C:/Users/Krisk/Documents/R/Packages
        - C:/Program Files/R/R-4.3.1/library
      knitr: 1.45
      rmarkdown: 2.24

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

Also, please format your messages as instructed at the top of the discussion when you open one.

Because you apparently use Reveal.js, it means you have access to all HTML/CSS/JavaScript.
You need to use your favourite browser inspect/developer mode to understand the structure and the rules to come up with a new one that suits you.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[KrisKarul]

Sorry for the formatting issue. Have updated it

[mcanouil]

Thanks!

Could you remove everything that is not relevant to your question?

Note that the current stable release is 1.5 and that 1.6 is coming. You might want to upgrade your version of Quarto to 1.5.

Also, your example is not reproducible. We don't have your images etc. Also why you should upgrade to 1.5.
Look at my example of code I shared. They are small and 100% reproducible on the stable current release.

[cderv]

I realised that Quarto revealjs allows the use of Alt + Left click on anywhere to zoom into that part before zooming out after the next click.

This feature comes from revealjs, through the built in RevealZoom plugin (https://revealjs.com/plugins/#built-in-plugins). You can see how it is implemented at https://github.com/hakimel/reveal.js/tree/master/plugin/zoom

Maybe you can add some JS or built a custom plugin based on it that does what you want.

Other Revealjs feature is auto animation (https://revealjs.com/auto-animate/) that we integrate (https://quarto.org/docs/presentations/revealjs/advanced.html#auto-animate). You could first have a slide with a zoomed image and then next with unzoomed, and it would auto animate through transitions.

Just sharing ideas as what you are asking is not built in.

[KrisKarul]

Thanks for the suggestions. The plugin part is difficult, but the auto animation feature sounds good!