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

Smoother API for auto-animation #38

Open
HugoGranstrom opened this issue Nov 14, 2023 · 2 comments · Fixed by #40
Open

Smoother API for auto-animation #38

HugoGranstrom opened this issue Nov 14, 2023 · 2 comments · Fixed by #40

Comments

@HugoGranstrom
Copy link
Owner

Right now auto-animation is quite verbose and repetitive. For example this simple example:

slide(slideOptions(autoAnimate=true)):
  nbText: """
# Only title first    
"""

slide(slideOptions(autoAnimate=true)):
  nbText: """
# Only title first
Then both title and text! 
"""

We had to repeat the # Only title first twice and if we ever need to update it in the future, we will have to remember to change it in both places! Let's try to DRY this down as much as we can! Here's a proposed API:

autoAnimateSlides(nSlides=2):
  showOn({0, 1}):
    nbText: "# Only title first"
  showOn({1}):
    nbText: "Then both title and text!

This will internally loop through the body nSlides times and only generate the showOns that match the current index.

This has its drawbacks though:

  1. All blocks will need to be recognized by Reveal.js as auto-animatable. You can't just wrap everything in a <div> as I remember it.
  2. This also means all blocks must insert a data-id in the correct place, which means each block's partials must be modified!
  3. It won't work well with text in nbText split over multiple calls. For example nbText: "Hello world" is not splitable to nbText: "Hello"; nbText: "world". So a separate mechanism would have to be implemented for text in nbText. Ideally, it should work with the autoAnimateSlides above. Here we will probably have to use <span>.

I will probably start out with the nbText version, but I'm not sure how to do it yet. Either through some kind of templating, e.g. #%[0, 1][Hello] #%[1][world]. Where the indices and text is supplied. It is quite ugly, though.
The other option is a more programmatic approach:

nbTextAnimate(({0, 1}, "Hello"), ({1}, " world"))

This is arguably even uglier and less readable :/

If someone has any other idea for possible APIs I'm very happen to see hear about them :D

@HugoGranstrom
Copy link
Owner Author

I realized that a simple showOn supports exactly as much as we do currently, so it should be a first step. And afterward we can add support for other blocks (code blocks in particular, but they are a bit special) and a way of auto-animating individual nbTexts.

@HugoGranstrom HugoGranstrom mentioned this issue Nov 15, 2023
3 tasks
@HugoGranstrom
Copy link
Owner Author

I have done a little bit of experimenting with the nbText auto-animation, but it doesn't really animate that smoothly. You can see that it understands that the elements are the same between slides (they stay visible and doesn't fade), but they just jump there directly instead of animating... So I'll postpone that part for the future for now. I'll give the code blocks a try though.

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

Successfully merging a pull request may close this issue.

1 participant