Turbo Morphing & CSS animation

1

turbo-rails (2.0.5)

I’m trying to get Turbo 8 morphing to work with CSS animations. For example, I have the following div box which transitions between blue and red depending on the :toggled querystring. The page redirects back to the current URL (root) and changes the :toggled querystring to either true or false, causing the div to change color.

<meta name="turbo-refresh-method" content="morph">

<% color = params[:toggled] == "true" ? "bg-red-200" : "bg-blue-200" %>
<div class='<%= "#{color} w-64 h-64 transition duration-500" %>'></div>
<%= link_to "Toggle", root_path(toggled: params[:toggled] != "true") %>

I’m expecting the div to transition colors, but instead it changes instantly. event.detail.renderMethod is set to replace, I would expect this to be morph?

I can get the desired effect if I hook into the turbo:before-render event listener and manually call Idiomorph.morph. But shouldn’t turbo 8 do this automatically for you?

<script src="https://unpkg.com/idiomorph@0.3.0"></script>

<script type="text/javascript">
  document.addEventListener("turbo:before-render", (event) => {
    console.log(event.detail.renderMethod);
    event.detail.render = async (prevEl, newEl) => {
      await new Promise((resolve) => setTimeout(() => resolve(), 0));
      Idiomorph.morph(prevEl, newEl);
    };
  });
</script>

Am I misunderstanding how Turbo 8 / Morphing is supposed to work?

1 Like
2

Hey LokPix welcome to the forum, thanks for posting this question what you are looking for is the view-transition meta tag that was added in Version 8

Here is a link to the docs where they discuss this

If you are interested in seeing the GitHub discussion and PR that added this change you can view it here

1 Like
3

Hello yunggindigo, thank you for your response.

Using the View Transitions API seems like a lot of extra work (and isn’t supported in all browsers yet) for something so simple. When apply the tricks from this blog post I actually get the result I’m looking for: The future of full-stack Rails: Turbo Morph Drive—Martian Chronicles, Evil Martians’ team blog

I noticed the following sentence at the end:

I must confess: our Turbo Morph Drive is not the same as the upcoming Page Refresh feature of Turbo 8. Turbo is not going to switch to morphing for all page updates, only for those refreshing the current page (via the corresponding Turbo Streams action).

Does this mean that morphing is only applied in turbo streams? (My main problem is that the rendering method is “replace” instead of “morph”).

if this is the case, I can simply continue to use the code in this blog post. This trick (which I thought was the purpose of Turbo 8) covers 90% of my needs.

1 Like