Animating Turbo Streams with Animate.css
We'll use the Animate.css library to simplify our work.
We'll cover the following...
Animate.css
Now that we have some experience with animations, let’s revisit the transitions we built in Turbolinks with Turbo Streams. As a reminder, our current implementation has new elements appearing in our favorites list and old ones being removed. This works, but it’d be more interesting to animate those transitions.
We can do this, but managing the outgoing transitions takes a little bit more work.
We’re going to call in a helper for the animation rather than continue to code the transitions by hand. The Animate.css library adds quite a few useful CSS animations that are a couple of CSS classes away.
The install process consists of two steps. First, add the package using yarn:
yarn add animate.css
Now we can animate our transitions by simply 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 classes to the response ...