How to make something like growsThenShrinksHel ?

[inv2004]

Thank you for very interesting library. I was trying to make a small page with it and found a problem:

Example:

slide:
  nbText: "Init"
  fragment @[grows], @[shrinks]:
    nbText: "11"
  fragment @[grows], @[shrinks]:
    nbText: "22"

The thing I do not like here - too many arrow-downs: one to grow "11", next to shrink "11", next to grow "22" Is it possible to make it with just one arrow-down? like we have for fadeInThenOut but growInShrink ?

Also, looks like it needs a lot of other pairs, that is why - is it possible to make the then condition without the built-in animations with "Then" ?

[HugoGranstrom]

Hi, nice to hear :)

Do I understand you correctly that this is the behavior you want? Press 1: grow "11" Press 2: shrink "11" and grow "22"

Reveal.js supports adding custom fragments by creating CSS classes so it should be possible to achieve. What kind of API would you like? I propose something like this:

slide:
  fragmentThen(grows, shrinks):
    nbText: "11"
  fragmentThen(grows, shrinks):
    nbText: "22"

where fragmentThen creates the necessary CSS class for the combination for us. So you wouldn't get an explicit animation called growsThenShrink but use this instead. Implementation-wise this should be easier than having to deal with macros to modify the enum. How does this sound?

[inv2004]

Press 2: shrink "11" and grow "22"

Exactly

I think that the fragmentThen looks very good.

fragmentThen(@[grows, fadeIn],@[shrinks, fadeOut])`   # for multiple animations

fragment grows=>shrinks:   # probably too much syntax sugar, fragmentThen is better

[inv2004]

Probably I have one more idea, not sure how easy to implement it.

It is clear that about every animation has it reversed equivalent. like grows=>shrinks, fadeIn=>fadeOut and etc.

Probably it would be possible to find the reverse automatically and to simplify fragmentThen(grows, shrinks) into something like fragmentReverse(grows) which will do the same. Not sure that the fragmentReverse is the good name

[HugoGranstrom]

fragmentThen(@[grows, fadeIn],@[shrinks, fadeOut])

This is a great idea :+1: I have come up with an easier way of solving this now so this should be possible. Instead of creating new classes, we play with the order of the fragments instead.

fragment grows=>shrinks: # probably too much syntax sugar, fragmentThen is better

Yeah, I'd like to keep things as simple as possible. The meaning of => is very unclear for those who wouldn't know about this feature.

Probably it would be possible to find the reverse automatically and to simplify fragmentThen(grows, shrinks) into something like fragmentReverse(grows) which will do the same. Not sure that the fragmentReverse is the good name

This is something which is too niché IMO to include. It is easy enough to create a template yourself for things like this. For example:

template growThenShrink(body: untyped) =
  fragmentThen(grow, shrink):
    body

Now you can reuse it easily and define templates for the combinations you personally use the most often.

[HugoGranstrom]

I have a somewhat working code locally now, there is just one problem. It's a general problem really, when you do fragment(@[fadeIn, grow]), the fadeIn animation is ignored and it is visible from the beginning. Hence you need to separate them: fragment(@[fadeIn], @[grow]) which first fadeIn and then grow (two clicks needed). So this becomes problematic for your example:

fragmentThen(@[grows, fadeIn],@[shrinks, fadeOut])

as the fadeIn is overridden by the grows. So we have two options, either allow multiple pre-animations like this (requires multiple clicks for fadeIn and grows):

fragmentThen(@[@[fadeIn], @[grows]], @[shrinks, fadeOut])

Or we would basically need something which can add a fadeIn at the same time as an animation. Something like this (only one click required):

fragmentFadeInNext:
  fragementThen(@[grow], @[shrink, fadeOut])

Where the fadeIn inserted by fragmentFadeInNext takes place at the same time as whatever the next animation is. This second idea could be generalized to support any animation like:

fragmentNext(fadeIn):
  fragment(grows):
    nbText: "11"

Here the fadeIn happens at the same time as the next animation, grows in this case. And a "shortcut" template fragmentFadeInNext could be created to simplify this process.

Do you have any opinions on this? Or a better proposal even? :)

[inv2004]

It is just an idea that it could be solved with fragmentReverse, but I am not sure.

I like an idea with nested fragments more, but need more time to play with it. The reasons I asked - to find possible simple solution, like highlighted lines of code

[HugoGranstrom]

fragmentThen is implemented as of nimiSlides 0.2.

fragmentReverse isn't general enough. What would be the reverse animation of highlightGreen? The reverse of strike? You now have the needed building blocks to implement your own fragmentReverse template.