DEV Community

Cover image for How to use View Transitions in Hotwire Turbo

How to use View Transitions in Hotwire Turbo

Matouš Borák on February 16, 2023

Have you heard the news? Google Chrome 111 will be released on March 1st 2023 and – among other things – will ship a feature I was eager to try sin...
Read full post
Collapse
 
superails profile image
Yaroslav Shmarov •

Wow, I'm really impressed by how easy it is to add the transitions!

Collapse
 
borama profile image
Matouš Borák •

Me too!

Collapse
 
tajakobsen profile image
Tom Arild Jakobsen •

I think this is really cool, so I tried to experiment with it a little.

I wanted to do some transitions on turbo:before-render, but I'm having a problem with my Stimulus-controllers being applied again when I navigate back.

I also get the exact same behavior (both positive and negative) with this code:

addEventListener("turbo:before-render", (event: TurboBeforeRenderEvent) => {
  if (document.startViewTransition) {
    event.preventDefault();

    document.startViewTransition(() => {
      event.detail.resume();
    });

  }
});
Enter fullscreen mode Exit fullscreen mode

Any thoughts?

Collapse
 
borama profile image
Matouš Borák •

Hi Tom, what do you mean by "being applied again"? Can you please elaborate?

Collapse
 
tajakobsen profile image
Tom Arild Jakobsen •

Hi Matouš. Sure, I'll give an example.

On my header menu I have some buttons that are created by a Stimulus-controller (because I want to know that JavaScript exists before I add them to the DOM.)

Every time I navigate back another set of those buttons are added to the header menu (for that page).

Thread Thread
 
borama profile image
Matouš Borák •

I must be still missing something as I think this is just the default behavior of Stimulus…? When you add the buttons in a connect() method, that method gets called every time you visit the page (regardless whether by link or the back button), doesn't it? Are you saying that the code behaves differently with and without the View transitions before-render listener attached?

Thread Thread
 
tajakobsen profile image
Tom Arild Jakobsen • • Edited

Yes, it behaves differently. It is related to the cache that turbo keeps of visited pages.

The problem is that when a page is loaded from that cache (+ viewTransition is used), the JavaScript is applied a second time to that same DOM (including Stimulus).

Adding <meta name="turbo-cache-control" content="no-cache"> to the page will fix the issue. So I will keep my view-transitions and go with that solution for now.

I will also raise this issue on the forum, and see if anyone else has seen this.

Thread Thread
 
borama profile image
Matouš Borák •

Aah, thanks, I see, the problem is that we run our web with Turbo caching disabled (which I forgot about) so I never encountered this issue in the first place. I'll play with it some more one day…

Collapse
 
bkspurgeon profile image
Ben Koshy •

Thanks for the post.

It looks like it's in very early stages. The custom CSS is painful - perhaps we need a PostCSS tool or similar tool to simplify? Ideally I would just like to add some type of data attribute on a html element, and let hotwire / tailwind take care of the rest - hopefully the PR gods devise something to make this easier in future.

Collapse
 
borama profile image
Matouš Borák •

I agree, the CSS part seems the most cumbersome. Recently, I saw a demo from Hey so perhaps they will add some kind of support to Hotwire soon…