Animating Turbo Streams with Animate.css

Modern Front-End Development for Rails — by Noel Rappin (51 / 133)

The Pragmatic Programmers
The Pragmatic Programmers

--

👈 Adding CSS Transitions | TOC | Using CSS and React Components 👉

All this animation talk makes me wonder about the transitions we built in Chapter 2, Hotwire and Turbo with Turbo Streams, where we have new elements appearing in our favorites list and old ones being removed. It’d be cool to be able to animate those transitions.

Turns out we can do this, though managing the outgoing transitions takes a little bit more work.

I’m going to call in a helper for the animation, rather than continuing to code the transitions by hand. The Animate.css library adds quite a few useful little CSS animations that are just a couple of CSS classes away.[47]

The install process consists of two steps. First, add the package using yarn:

​ $ yarn add animate.css

Second, include the line @import “animate.css/animate.css”; in app/packs/entrypoints/application.scss.

Now we can animate our transitions just by adding the CSS class animate__animated to any element and then following that with one of the several specific animation classes that Animate.css provides, like animate__fadeInUp.

Going back to our Turbo Streams example, when we add something to the favorites list, we’d like it to animate in. All we need to do in that case is add the Animate.css…

--

--