Can we trigger zoom to a location via a fragment?

[sjgknight]

I'm wondering if anyone has advice on using fragment events to trigger the built in zoom (normally triggered using alt+click) for a pre-specified location?
This would allow having a single slide with defined areas, that as the presenter moves through the presentation fragments are zoomed in on/out of. That would be useful, for example, for diagrams where parts may be small, an area can be defined and zoomed in on as a fragment. I know there is a 'grow' fragment, but I have found it difficult to use with mermaid diagrams because it transforms the content; using the zoom method doesn't touch the content. This method also keeps repetition to minimum (i.e., avoids having the same diagram on multiple slides). I'm not aware of a current plugin for this.

Any advice much appreciated.

[jawad-js]

Hi! You can hook into Reveal’s fragment events and trigger the Zoom plugin directly.
Here’s a minimal example:

Reveal.addEventListener('fragmentshown', e => {
  Reveal.getPlugin('zoom').zoom.to({ element: document.querySelector('#myTarget') });
});

Reveal.addEventListener('fragmenthidden', () => {
  Reveal.getPlugin('zoom').zoom.out();
});

This way, when the fragment appears, it zooms to the element you specify (like a part of a diagram), and when it’s hidden, it zooms back out. Works nicely without duplicating slides or altering the diagram content.

[maurerle]

I could not do this as Reveal.getPlugin('zoom').zoom does not have azoom element..

So I have something like this:

::: {.fragment .myClass}
Test
:::

But can't zoom to the element. Maybe I am missing something @jawad-js ?