Support slide animations and transitions

[orhun]

Hello 👋🏼 First of all thanks a lot for the great presentation tool, I'm currently using it for my upcoming EuroRust talk :)

One thing that I felt missing (after switching to presenterm from Google Slides (ugh)) is the slide transitions such as fade in/out. I know this possible to do in the terminal thanks to the tachyonfx project. I'm not aware of any other library.

However, tachyonfx is built for Ratatui applications and I see that presenterm only depends on crossterm. But I believe it still should be implementable. I'm interested in working on this, so let me know what you think!

Inviting @junkdog to the discussion as the author of tachyonfx.

[mfontanini]

Hey, thanks! Love to hear people are using presenterm on conference presentations :heart:.

Adding transition effects sounds good to me! I wouldn't go far out and support lots of them though, just some simple fade in/out or a sort of "swipe horizontally to next/previous slide" would make sense. I'm not sure how this works around images though. I can imagine a swipe animation would work but a fade in/out one may not work / may only work under the kitty graphics protocol.

[orhun]

Thanks for the reply :)

I totally agree, adding simple transitions would be more than enough. Have you had time to look at how tachyonfx works? I wonder if we can use it (or re-use some parts) from there. 🤔

[junkdog]

Hi 👋🏼,

Neat project! I looked around for something similar a couple of years ago but came up empty.

I originally envisioned tachyonfx as having multiple backends, but the existing code (extracted from glim) was already tightly coupled with ratatui, and going straight for multiple backends felt a bit premature. Maybe it could be worth revisiting, but in any event - feel free to take whatever holds up to scrutiny or looks useful.

tachyonfx is pretty simple: it mostly works as a "post-processing" step, i.e. the effects are applied after the widgets have been rendered. As such it expects a shared intermediate screen buffer to read from and write to.

While effects can run "standalone", they are typically composed of multiple effects, usually employing a sequence or parallel effect as the root. This is maybe not necessary if you're going for simpler transitions, but I find that many transitions tend to look better when they combine multiple effects.

Effects are applied to a given area. CellFilters can be used to further refine which cells within the given area the effect is applied to:

let margin = Margin::new(1, 1);
let border_text        = AllOf(vec![Outer(margin), Text]);
let border_decorations = AllOf(vec![Outer(margin), Not(Text.into())]);

parallel(&[
    sequence(&[
        with_duration(short_duration, never_complete(fx::dissolve(0))),
        fx::coalesce((duration, BounceOut)),
    ]),
    fx::fade_from(Dark0, Dark0, duration)
]).with_cell_selection(border_decorations)

I'm quite happy with how CellFilters worked out. They bring a lot of flexibility without much complexity.

The only "optimization" tachyonfx performs is that some effects memoizes the previous cell's color transformation. This speeds up e.g. fade effects, avoiding many identical RGB->HSL->RGB translations.

[orhun]

Hey again @junkdog, thanks for the reply. Things are more clear after diving into the code a bit (hint: #10) and your explanation!

As such it expects a shared intermediate screen buffer to read from and write to.

Very interesting, is it a generic buffer or something like Ratatui's Buffer type? 👀

I'm wondering if it would be somehow possible to use tachyonfx core rendering capabilities (along with CellFilters) in presenterm to create basic fade animations. Do you think it would be possible?

[mfontanini]

Hey, just wanted to let you know after some recent changes implementing slide transitions should be quite doable. This will almost definitely not use tachyonfx because I don't use ratatui here (sorry @orhun don't throw hat rats at me please) but I do plan on supporting a couple of simple slide transitions soon.

[orhun]

That's great (either way)! Definitely looking forward to it!

[mfontanini]

Alright, I added a slide horizontal and fade transitions for now. I'll probably add at least one more before next release. See #528 for config but essentially:

transition:
  animation:
    style: fade # or "slide_horizontal" for the other one

There's still some optimizations to be done but I think it works pretty alright (see videos in #528 and #534).

[orhun]

That's very impressive, thank you!

[0atman]

I laughed out loud when I saw the fade demo - @mfontanini this is AWESOME! I love the trick of double-buffering the ascii version of the image so it dissolves properly - genius!

It won't work for how I produce my videos, but I'm turning it on locally as I develop them to bring a little joy to my day! 😆

[mfontanini]

Thanks! I think eventually it would be worth investing into ASCII image rendering like proposed here https://github.com/atanunq/viuer/pull/62 just to benefit from it here. That'd make it look much nicer.