Turbo Streams - List Animations Using the View Transitions API

Premise

Since I always try to trace out a (web) technology from multiple angles, I wanted to test whether there’d be a use case for View Transitions with Turbo Streams, too.

That use case arrived when I had to implement infinite loading using a “Load more” button for a client project. I had a list of items to which more were added using a <turbo-stream action="append"> action. What was asked for was a smooth animation for this event.

I could’ve used any CSS animation using a class and a timed JavaScript callback to remove that class again, but I wanted to see if View Transitions could do the job, and perhaps more elegantly.

Starting Point

We start with a simple list of tickets, with an ID of tickets. Beneath it there’s a “Load More” button wrapped in a <form>:

https://stackblitz.com/edit/turbo-streams-view-transitions?file=index.html%3AL42

The form’s action points to the / route which responds with a <turbo-stream> to mimic the typical behavior of a Ruby on Rails controller:

https://stackblitz.com/edit/turbo-streams-view-transitions?file=index.js%3AL12

In the stylesheet I’ve prepared a view transition named new-ticket which uses an animation to slide in the respective new element from the right:

https://stackblitz.com/edit/turbo-streams-view-transitions?file=styles.css

Challenge

Akin to Turbo Frames, Turbo Streams also fire a turbo:before-stream-render event that allows to customize the render method.

Your task is, similar to the preceding challenges, to overwrite the original render method. Note that you have to manually invoke a same document transition again!

Here’s a look at the result:

Caveat

Keep in mind that a view-transition-name must be unique across the elements of a page!