Transitions on artlung.com as of 2025-12-03

-artlung-transitions.scss

@view-transition {
  navigation: auto;
}

/* Customize the default animation behavior */

// TODO:
// view transition name
// view transition class

::view-transition-group(root) {
  animation-duration: 0.5s;
}

/* Create a custom animation */

@keyframes move-out {
  from {
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes move-in {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

/* Apply the custom animation to the old and new page states */

::view-transition-old(root) {
  animation: 0.4s ease-in both move-out;

}

::view-transition-new(root) {
  animation: 0.4s ease-in both move-in;
}