I'm Dani Akash

I'm Dani Akash

• Know JavaScript & React
• Work at Clarifai
• Like Science, Sci-fi and WorldBuilding
• On a journey to platinum all Souls Games

View Transitions API

Making boring websites exciting!

View Transitions API

What does view transitions mean?

View transitions offer a way to animate the transition between different views in a web application.

const $box = document.getElementById("my-box");

const moveBox = () => {
  $box.classList.toggle("translate-x-36");
};

        
function handleClick(e) {
  if (!document.startViewTransition) {
    return;
  }

  document.startViewTransition(() => moveBox());
}
        
      

.my-red-box {
  view-transition-name: my-red-box;
}

Cross-document view transitions

Let's walkthrough an actual project

@view-transition {
  navigation: auto;
}

All pages should include this css line

All the tech used in this talk:

• Astro
• Tailwind CSS
• Reveal.js
• View Transitions API

Github Repos

• Slides used in the talk - DaniAkash/view-transitions

or find them all + my previous talks @ daniakash.com/speaking

Connect with me on:

• Twitter: @dani_akash_
• Bluesky: @daniakash.com

I also run a newsletter to talk about science, tech & dev tools: daniakash.com/newsletter