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