JS.transition blocks Liveview until time has elapsed

Hi there,
I’m adding an animation to an existing DOM object. To do so I use JS.transition to add a temp CSS class, the call is initiated from the server with a push_event.
Everything looked fine at first, with default 200ms transition time.
But it was not long enough since the animation lasts several seconds.
It needs 4s to complete the animation.
So I bumped the transition time to 4000.
It is all nice now, only Liveview is frozen during 4s. It will buffer user clicks for that duration and then will proceed.
I can’t have a frozen UI for 4s of course.
Do you know if there is a way around this behavior without breaking the “DOM awareness” of JS.transition ?


I think you will have to write a hook and apply the transitions yourself, either in updated() or in a handleEvent handler.

See also the docs on that linked page for AlpineJS which describes how to copy attributes across updates, which you might want to do to flag “in-transition” elements?

One quirk I noticed is that updated is run even when the dom diff doesn’t effect that element, not sure if that is a bug but you’ll have to watch out for it. edit: in some cases, at least when you have phx-mounted attached.

Probably you could also have multiple/nested liveviews, I think they probably both block their JS independently.

I ended up using greensock GSAP libraries. They play along well with LiveView and handle well animation interruptions.
I basically fire event from server with push_event, catch on the client with code declared in app.ps
Example :

window.addEventListener("phx:gsap", ({ detail }) => {
    var tl = gsap.timeline();
    tl.from(detail.zoom, { scale: 1, duration: 0.7 })
    tl.fromTo(detail.zoom, { scale: 1.3 }, { scale: 1, duration: 1 })
    tl.fromTo(detail.wiggle, { opacity: 0, scale: 2 }, { opacity: 1, scale: 1, duration: 0.5, repeat: 1 });

Just chiming in to say I hit this issue as well! It makes using the JS.transition (or show/hide with transition option) a no-go with longer animations. I’d love to find a workaround without needing to go to an external library.

Liveview is frozen during 4s. It will buffer user clicks for that duration and then will proceed.

It’s certainly horrible.

LiveSvelte is made for this, a disappearing framework, no bloat, powerful animation support which can be trivially embedded in your liveview pages.