<h1>Basic View Transitions API demo</h1>

<p class="transition"><span id="greeting">Hello</span>!</p>

<p>Watch the greeting fade between languages as you click the button!</p>

<button id="advance">ADVANCE</button>
html {
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: 1.3em;
  max-width: 40rem;
  padding: 2rem;
  margin: auto;
  line-height: 1.8rem;
}

.transition {
  view-transition-name: wow;
}

::view-transition-old(wow),
::view-transition-new(wow) {
  animation-duration: 1s;
}

::view-transition-old(wow) {
  animation: leave 2s;
}

::view-transition-new(wow) {
  animation: enter 1s;
}

@keyframes enter {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes leave {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(50px);
    opacity: 0;
  }
}
View Compiled 
const greetings = ["Hola", "Olá", "Bonjour", "Yassas", "Shalom", "Hello"];
const greeting = document.getElementById("greeting");
const advance = document.getElementById("advance");

let num = -1;

function init() {
  advance.addEventListener('click', updateView);
}

function count() {  
  if (num >= greetings.length - 1) {
    num = -1;
  }
  
  return ++num;
}

function updateView(event) {
  const displayNewText = () => {
    greeting.textContent = greetings[count()];
    console.log(num);
  };

  // If View Transitions aren't supported:
  if (!document.startViewTransition) {
    displayNewText();
    return;
  }

  const transition = document.startViewTransition(() => displayNewText());
}

init();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.