Tech tip - tips from using: 'view transitions' in JavaScript

I have been using Chrome's 'view transitions'.

I set the 'view-transition-name' property in CSS classes and add (or remove) these CSS classes from the 'document.documentElement' root HTML element.

I can do this when the 'view transition' ends using a promise:

transition =
    document.startViewTransition(play);

transition.finished.then(finishViewTransition);

I use a 'do nothing' 'view transition' to animate showing a dialog box without animating the whole page:

::view-transition-new(doNothing) {
    animation: none;
}
.vtDoNothing {
    view-transition-name: doNothing;
}

#confirmBox {

...

document.documentElement.className += 'vtDoNothing';

I vary the animation in a 'view transition' by creating a 'style' element in JavaScript, then setting the 'innerHTML', and finally adding this 'style' element to the 'head' element of the page.

I use an 'animation delay' to make the 'new' animation follow the 'old' animation rather than crossing. For example:

    animation: vtFadeOut   .5s linear both,
               vtZoomIn    .5s linear both,
               vtSpiralIn  .5s linear both;
}
::view-transition-new(endGame) {
    animation: vtFadeIn    .5s .5s linear both,
               vtZoomOut   .5s .5s linear both,
               vtSpiralOut .5s .5s linear both;
}

I keep the 'view transitions' short because the user cannot interact with the page while a 'view transition' is running. However the page can be changing while the 'view transition' animations are running. I use 'linear' animations so the page does not seem to freeze at the end of the 'view transition'.

The animations in a 'view transition' only happen when the browser has calculated the final state of the page. These calculations happen in the background and are not visible to the user. Before I used the new 'view transitions' API, I would animate away the old page state, then there would be a delay (maybe a blank screen) while the browser calculated the new page state, before I could animate in the new page state. However, in this old way, the user could interact with the page during the animations. If the user wanted to, I could stop the animation and move on. My 'old' page animations seem slow and jerky compared with the new 'view transitions'.

I also turn on a cross-fade when following links between my pages by adding to their stylesheets:

  @view-transition {
              navigation: auto;
  }

I can very quickly add page animations to my game with the new 'view transitions' API. It is easy to use the default 'cross-fade' and, although subtle, it looks very good. I use this when changing tabs in my 'settings' page.

There are more tips at: bbingo.xyz/t