Smooth Transitions with Turbo Streams | Rails Designer

With Turbo Streams you can update specific parts of your app. Inject a chat message, update a profile picture or insert a Report is being created alert. The preciseness Turbo Streams offers is great. But often the abruptness of it, its not too appealing to me. The new component is just there (or isn’t, if you remove it). I’d like to add a bit more joy to my apps and this technique is something that does just that. I previously explored multiple techniques to add some kind of transition or animation when an element was inserted or removed. I fine-tuned it over the years while using it in production. And I can say I’m happy with how the technique works I am outlining today.