JS.transition blocks Liveview until time has elapsed

Questions / Help
, ,
1

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 ?

Thanks
Jean-yves

2

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.

3

Hi,
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 });
})