What’s the "correct" way of animating in new appended content?

1

This is my first post, so thanks very much for all your help, please let me know how I can improve my question! I’m learning all of Hotwire/Stimulus new after years of Rails (and various js frameworks I’d like to move away from). I know Rails inside out.

So I seem to be having some difficulty animating content coming in from a turbostream but not animating it on page render.

I have an index of content and each item in the list can get updated with content via a turbo stream.

If I use animate.css and put the class animate__slideInRight each element gets animated when it gets set to the page via an append, which is the correct behaviour.

However I’m having an issue where on page load all of the content also gets rendered with animate__slideInRight and I do not want that.

In order to fix this issue I have detected in the controller if the request is the first page html load or a turbostream, and set an attr_accessor on the model to flag if the class should be present on page load or in the turbostream.

I feel as though this should be doable in js, so I was wondering how do I hook into new incoming content to add the animate-in class when the new content arrives via a turbostream.

So far I have hooked into event.target.action === "append" and have the new targetFrames content but it is already appened before I can add the animation class.

1 Like
2

What about moving the logic to the backend and only add animate__slideInRight to turbo-streamed elements?

3

That’s what I’m doing at the moment, but I was wondering if there was a way to move this code client-side so that the js adds the class only when the html is added via a turbostream, and not on the original load.

4

What’s the motivation for moving it client side vs server side?

5

I think partially out of curiosity and wanting to know how to do it to advance my Hotwite knowlage. For example I know how to animate out content that’s removed via a turbostream by hooking into the"turbo:before-stream-render" event with a event.target.action === "remove" so I think for completeness and curiosity how is it possible to create the animate in event only via js.