[Feature Request] Idle Animation

[GoodM4ven]

Hey there,

This awesome package works flawlessly for a start-end situations.

But I wanted to ask: what's the best way to add an idling animation in between? After $animate() is finished working (the entry), and of course before the leave animation...

Should I just go for an enforced regular TailwindCSS animation class for example right after $animate() is executed, for example? But then the manual approach requires staying consistent with all the animation props of the x-animate directive but now in CSS too.

I also wonder how priceless would Theatre.js TALL stack integration would be!

[ralphjsmit]

Hey @GoodM4ven,

Thanks for your message. Can you provide a code of example of what you currently have, so that I can take a look?

[GoodM4ven]

Sure, man. Here's how I think this feature would look like:

<div
    x-init="
        () => {
            $animateReset(0);                           // starts with opacity 0.0
            $animate(0.7);                              // animates it to opacity 1.0
            setTimeout(() => $animateIdle(), 700);      // starts the idle animation between opacity 1.0 and 0.5
            setTimeout(() => $animateReset(0.5), 5000); // after 5 seconds, first we wait until the idle animation triggers (animationiteration) then stop it and start the normal reset animation (fading out)
        }
    "
    x-animate.reset="{
        opacity: 0.0,
    }"
    x-animate="{
        opacity: 1.0,
    }"
    {{-- Either using keyframes and animation --}}
    x-animate.idle.keyframes="{
        '0%, 100%': {
            opacity: '1.0',
        },
        '50%': {
            opacity: '0.5',
        },
    }"
    x-animate.idle.animation="2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
    {{-- Or using an already defined Tailwind animation class (`animate-pulse`, for example) --}}
    x-animate.idle.tailwindClass="pulse"
></div>

What do you think?

Note: Also, maybe, just like we'd wait internally for the animationiteration event, preferably, we could also wait for the default $animate() to finish before making $animateIdle() starts; this way we don't have to manually setTimeout(), I think...

I was inspired by this bundle of awesomeness: https://barba.js.org/
Another recent inspiration: https://developer.chrome.com/blog/entry-exit-animations/

[GoodM4ven]

I think I noticed that no matter how animations are implemented around, it's always a huge task to relate an animation to its duration! So in the case of TALL stack animations, you'd probably need a lot of states for whether animations are done or not even...

I wonder if it could be helpful to encapsulate an animation in an object that contains everything, including the duration; and perhaps even a callback of what could happen when it's done animating (or iterating) and so on.