view-transitions VS Next.js

So let’s add the following CSS to the index template (Slim recognizes a css: block that just renders a normal tag):

/ app/views/counter/index.html.slim
/ (anywhere outside the Turbo Frame tag)
css:
  /* (1) */
  #counter {
    view-transition-name: counter;
    contain: layout;
  }

  /* (2) */
  @keyframes rotate-out {
    to {
      transform: rotate(90deg);
    }
  }

  @keyframes rotate-in {
    from {
      transform: rotate(-90deg);
    }
  }

  /* (3) */
  ::view-transition-old(counter) {
    animation-duration: 200ms;
    animation-name: -ua-view-transition-fade-out, rotate-out;
  }
  ::view-transition-new(counter) {
    animation-duration: 200ms;
    animation-name: -ua-view-transition-fade-in, rotate-in;
  }

Enter fullscreen mode Exit fullscreen mode

Let’s break this code down a bit:

1. The CSS selector #counter matches the counter div and the view-transition-name property names this area of the screen, for the purpose of View Transitions, as counter. This name will be used in the animation declarations below.

   The clone property currently must be added here for some reasons internal to the current View Transitions implementation in Chrome and must be set to paint or layout. This restriction is planned to be removed from the specification, though, and in fact I’ve heard that it is not needed in Chrome Canary any more.

2. The rotation animation keyframes are defined here. Note that while the transition also uses fade-in and fade-out animations, they don’t have to be defined here because the spec requires browsers to implement them natively under the name -ua-view-transition-fade-in/out.

3. The CSS animations for the counter (the View Transition area named counter) are configured here. The CSS selectors here are some of the pseudo-elements automatically created during the transition. The -old pseudo-element represents a screenshot of the old DOM state that should somehow disappear or ”go away“ from the viewport and the -new pseudo-element represents a live version of the final DOM state that should be brought into sight.

So, overall, this code selects a portion of the page and animates it independently from the rest of the page during Turbo Frames DOM updates. Behind the scenes, the default cross-fade for the rest of the page still also takes place, it just is not visible because all its elements are visually identical. The result looks like this:

A few initial tips & tricks

Does this work for Turbo Drive visits, too?

Sure it does and it’s actually pretty easy! All we have to do is define the same event handler as we did above but attach it to the turbo:before-render event instead. By default we’ll get a cross-fade animation of the whole page during Turbo Drive page visits.

Do not try to ”name“ the Turbo Frame itself

When playing with Turbo Frame View Transitions I first tried to use a custom animation for the whole Turbo Frame element by naming it via the view-transition-name property. For some reason, this does not work and you end up with a very cryptic and misleading error message in the console (yes I did have the contain property in the CSS declaration):

Aborting transition. Element must contain paint or layout for view-transition-name : counter

So, when using custom animations, an element from inside the Frame must be selected and named.

Debugging View Transitions

Since View Transitions are technically just normal CSS animations, they can be inspected with the Animations panel in the Dev Tools. Also, the automatically created pseudo-elements are visible in the Elements tab during the transitions:

Conclusions

I confess I am quite excited about the new View Transitions API. Among the things I particularly like about it are the following:

• It is surprisingly easy to plug this inside Hotwire Turbo and you get the default cross-fade transition animation immediately for free (in latest Chrome-like browsers, that is).
• Since this is implemented natively in the browser, the animations are highly optimized and performant.
• View Transitions should allow (today or in the future) building highly interactive transitions similar to those in Material Design.
• There is some initial support for Multi-Page Applications, too, which is great news because we can bring transition animations declared in CSS to our old but gold apps.
• It should be possible to use a different animation based on the ”direction“ of the visit (Back/Forward) using the Navigation API (also still experimental and not very well supported, though).

Things I am still concerned about:

• Browser support: the Firefox team evaluates it, the Safari team is silent. This will be a log run and making a polyfill is probably too difficult. For web sites where transition animations are critical, this is still a no go.

• If you’re not careful enough, the transition feels more fluid but also a little bit slower. The reason for it is that View Transitions start the animations at the moment when both the old and new DOM states are already rendered. This means that the exit animation is delayed until new content is available and until that time, nothing happens. Also, the entry animations for the new state usually delay its appearance a little bit more.

  This is not a problem of View Transitions themselves but rather a more generic one. If the exit animation (e.g. a fade out) started immediately after user interaction (e.g. a link click), sometimes the user would have to stare at a blank page until the new page content is grabbed, rendered and run through an entry animation. Still, some kind of support for this scenario (possibly with custom loaders or skeletons) would be nice.

• Tailwind support: I think the current Tailwind syntax does not allow targeting the HTML document-connected pseudo-elements so we have to resort to custom CSS (which is not a big problem, actually).

• All transitions target the whole page, there is currently no option to make, say, two components (Frames) animate totally independently. An initial proposal for ”scoped transitions“ can be found here.

Overall, I like this feature and wish it matures enough and gets wider support soon!

true, but HTML-only websites are often pretty clunky

infuriatingly, if HTML had just a bit more oomph, we could make a lot better websites with it, but they haven't been moving HTML forward as a hypermedia for decades now (see https://htmx.org for what I mean, they could implement this concept in the browser in a week, and it would change web development dramatically)

the upcoming view transitions API will help:

https://github.com/WICG/view-transitions

but, still, there are some really obvious and simple things that could be done to make HTML much more compelling (let's start by making PUT, PATCH and DELETE available in HTML!)

Cool answer: Look at shared element transition. this is gonna be really cool one day, sadly not yet out of the proposal state... https://github.com/WICG/shared-element-transitions

Native features faster: Quickest path to utilizing native features/UX improvements once they are released, no need to wait for a third party implementation. Example: shared element transitions first came to native, then were replicated on the web.

Lol yes, can’t edit now sorry.

1: https://github.com/WICG/shared-element-transitions

I took the experimental page transition API (a.k.a. shared element transitions) for a test drive with SvelteKit, and the result was pretty slick. You’ll need Chrome Canary with the chrome://flags/#document-transition flag enabled if you want to try this one out yourself — the original tweet has a video if you don’t want to jump through those hoops. There’s a live demo and a GitHub repo if you want to see how it was accomplished.

Here is link number 1 - Previous text "yet"

There's also the developer guide https://github.com/WICG/shared-element-transitions/blob/main/developer-guide.md.

https://github.com/vercel/next.js/discussions/27666 One of them said 'renaming folder to uppercase' might cause trouble. git might not recognize case-sensetive changes by default.

Next.js has long cemented itself as one of the front runners in the web framework world for JavaScript/TypeScript projects so we’re going to be using that. More specifically we’re going to be using V14 of Next.js which allows us to use some exciting new features like Server Actions and the App Router.

Web frameworks like Next.js will usually include this feature, but do check that they set the caching headers correctly!

Vite and Next.js are both top 5 modern development framework right now. They are both great depending on your use case so we’ll discuss 4 areas: Architecture, main features, developer experience and production readiness. After learning about these we’ll have a better idea of which one is best for your project.

> It’s important to be aware of what you are getting if you go with React, and what you are getting is a far cry from what a framework would offer, with all the corresponding pros and cons.

Would you like to elaborate on that?

In my experience, with something as great, size/ecosystem-wise as React, there will almost always be at least one "mainstream" package for whatever you might want to do with it, that integrates pretty well. Where a lot of things might come out of the box with a framework, with a library I often find myself just needing to install the "right" package, and from there it's pretty much the same.

For example, using https://angular.io/guide/i18n-overview or installing and using https://react.i18next.com/

Or something like https://angular.io/guide/form-validation out of the box, vs installing and using https://formik.org/

Or perhaps https://angular.io/guide/router vs https://reactrouter.com/en/main

Even adding something that's not there out of the box is pretty much the same, like https://primeng.org/ or https://primereact.org/

React will typically have more fragmentation and therefore also choice, but I don't see those two experiences as that different. Updates and version management/supply chain will inevitably be more of a mess with the library, admittedly.

Now, projects like Next https://nextjs.org/ exist and add what some might regard as the missing pieces and work well if you want something opinionated and with lots of features out of the box, but a lot of those features (like SSR) are actually pretty advanced and not always even necessary.

Next.js: For the website and the admin dashboard

Until the time of writing, there is no official example of how to enable runtime environmental variables in a Dockerized Next.js app, as utilizing unstable_noStore would only dynamically evaluate variables on the server (node.js runtime). There is also an interesting discussion regarding this topic on GitHub.

next.js is a very popular React framework. remix-adonisjs includes more functionality through the AdonisJS backend ecosystem, and should be easier to self-host and self-manage.

Cheryl Murphy is not only a dedicated full-stack web developer skilled in technologies like React, Next.js, and NestJs but also a community-driven professional who recently took on the role of volunteer project team lead at Web Dev Path. With a dual Bachelor's degree in Computing and Chemical Engineering from Monash University, Cheryl’s journey in tech is marked by a passion for building accessible solutions and a commitment to fostering community within tech.

For more information, check out this issue.