Turn: Animate Restore

This demonstrates how to animate Back/Forward navigations with Turn (without View Transitions). Tap the Lorem/Back links in the navigation bar to view, then use the browser's Back/Forward buttons to see the difference.

Next example or back to examples

Our Back link includes a data-back attribute. When this is clicked, we prevent the default, apply a data-animate-restore attribute to the HTML element, and navigate back via the history API. Then once the animations have completed, we tidy up.

addEventListener('click', function (event) {
  if (event.target.dataset?.back != null) {
    event.preventDefault()
    document.documentElement.dataset.animateRestore = true
    window.history.back()
  }
})

addEventListener('turn:enter', function (event) {
  document.documentElement.removeAttribute('data-animate-restore')
})

To style the animations, we use the data-animate-restore attribute to apply the standard animations.

html[data-animate-restore].turn-restore.turn-exit [data-turn-exit],
html.turn-advance.turn-exit [data-turn-exit] {
  animation-name: fade-out-up;
  animation-duration: .3s;
}

html[data-animate-restore].turn-restore.turn-enter [data-turn-enter],
html.turn-advance.turn-enter [data-turn-enter] {
  animation-name: fade-in-up;
  animation-duration: .6s;
}