Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for reveal.js auto-animate #9123

Open
reagle opened this issue Oct 5, 2023 · 2 comments
Open

Support for reveal.js auto-animate #9123

reagle opened this issue Oct 5, 2023 · 2 comments

Comments

@reagle
Copy link

reagle commented Oct 5, 2023

It would be nice to be able to use revealjs auto-animate feature/attribute, turning this:

# Auto-Animate {data-auto-animate}

# Auto-Animate {data-auto-animate style="margin-top: 100px; color: red;"}

into this

<section data-auto-animate>
  <h1>Auto-Animate</h1>
</section>
<section data-auto-animate>
  <h1 style="margin-top: 100px; color: red;">Auto-Animate</h1>
</section>
@jgm
Copy link
Owner

jgm commented Oct 5, 2023

There are a couple of issues:

  1. Currently pandoc does not allow a bare attribute with no value, like {data-auto-animate}. You could do {data-auto-animate="true"}, which I assume would also work for reveal.js (untested)?
  2. Currently pandoc puts this attribute on the h1 instead of the surrounding section. It would have to be moved to the section.
  3. Would the style attribute need to be moved as well?

@reagle
Copy link
Author

reagle commented Oct 5, 2023

Presently, this markdown:

## Auto-animate {data-auto-animate="true"}

## Auto-animate {data-auto-animate="true" style="margin-top: 100px; color: red;"}

generates this HTML:

<section id="auto-animate" class="slide level2" data-auto-animate="true">
<h2 data-auto-animate="true">Auto-animate</h2>
</section>
<section id="auto-animate-1" class="slide level2" data-auto-animate="true" style="margin-top: 100px; color: red;">
<h2 data-auto-animate="true" style="margin-top: 100px; color: red;">Auto-animate</h2>
</section>

This HTML works except that that the animation moves 200px down from the top because of the doubling of the margin-top attribute in the section and h2. That is:

  1. ="true" works fine.
  2. I'm seeing data-auto-animate on the section and h2.
  3. Probably? Even if it works presently, I figure it's best to follow the revealjs documentation, if possible, in case they change something.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants