Animate text changes when Liveview push an update

My LiveView app is great, but whenever data updates my pages, everything is too fast. I’d like so see a transition on updates, so that the user eye “sees” what text is added/removed/changed.
I’m a rookie in HTML/CSS, so I bet there is an easy CSS solution, but my searches did not give any result.
What I’m looking for is a bit like what broker screens do : they flash the price whenever its value change.
Thanks and sorry for my rookiness.

1 Like

I’m doing something like this and my approach is used the phx-hook ( mounted, beforeUpdate, updated) to update the element styles.
Please refer to the session JS Interop and client-controlled DOM at Phoenix LiveView HexDocs.

1 Like

Just add an HTML class to the new elements, so you can target it with CSS and make them flash with a CSS animation. You can look at this example. Note that only CSS is needed: the JavaScript part in the example is just there to append a new element with an HTML class of flash when clicking on the “add” button, but you would do that with LiveView.

4 Likes

It doesn’t replay the animation if you update the same element in the current LV connection, I think, since the class was already placed on the earliest update.

One way to fix this is have the LV send itself a message Process.send_after(self(), :clear_flash, 500) right before returning assigns. The 500 ms delay is so the animation can finish, which is slightly smelly but probably good enough for many cases.

What I’d really like to do is make the removal 100% synced with the animation finishing.

Other approaches I haven’t tried:

  1. CSS animation finishes and triggers a state update somehow? Probably hacky.
  2. LV/JS bindings/commands?
  3. Alpine.js or similar?