View transitions

Types

There are multiple built in transitions you can utilize. These can be used individually per anchor link or you can set them globally.

cross-fade
slide-right
slide-left
expand-from-element

<!-- Set globally -->
<meta content=slide-left name=view-transition>
<meta content=slide-right name=view-transition-back>


<!-- Set transition on anchor link
        These will override the global settings -->
<a href=/ transition-name=cross-fade>Welcome</a>
<mc-card href=/item/123 transition-name=expand-from-element></mc-card>

Custom view transitions

You can add your own view transitions. Both CSS and code transitions are supported.

/* Use standard css */
::view-transition-old(slide-left) {
  animation: page-slide-left-out;
  animation-duration: 400ms;
  animation-timing-function: ease;
}
::view-transition-new(slide-left) {
  animation: page-slide-left-in;
  animation-duration: 400ms;
  animation-timing-function: ease;
}

@keyframes page-slide-left-in {
  0% {
    transform: translateX(100%);
    clip-path: inset(0px 100% 0px 0px);
  }
  100% {
    transform: translateX(0px);
    clip-path: inset(0px 0px 0px 0px);
  }
}

@keyframes page-slide-left-out {
  0% {
    transform: translateX(0px);
    clip-path: inset(0px 0px 0px 0px);
  }
  100% {
    transform: translateX(-100%);
    clip-path: inset(0px 0px 0px 100%);
  }
}


import { registerViewTransition } from '@thewebformula/lithe';

registerViewTransition('the-name', {
  setup(container, target) {
    const scrollTop = document.documentElement.scrollTop;
    document.documentElement.style.setProperty('--mc-view-transition-scroll-fix', `translateY(-${scrollTop}px)`);
    const containerBounds = container.getBoundingClientRect();
    const targetBounds = target.getBoundingClientRect();

    return {
      containerBounds,
      targetBounds,
      scrollTop
    };
  },
  animate(container, { containerBounds, targetBounds, scrollTop }) {
    document.documentElement.animate(
      [
        {
          transform: `translate(${targetBounds.x - containerBounds.x}px, ${targetBounds.y - containerBounds.y - scrollTop}px)`,
          height: `${targetBounds.height}px`,
          width: `${targetBounds.width}px`
        },
        {
          transform: `translate(0px, 0px)`,
          height: `${container.offsetHeight}px`,
          width: `${container.offsetWidth}px`,
        }
      ],
      {
        duration: 400,
        easing: 'cubic-bezier(0.2, 0, 0, 1)',
        pseudoElement: '::view-transition-new(expand-from-element)'
      }
    );
  }
});