New in WebDev 2024 - Interactive Experiences

Recently we had a chance to witness an amazing Google I/O conference which surprised devs with a bunch of so-needed updates in web development. Today we will briefly go through some juiciest features that you can already use in your apps or that will be available in the near future.

New Interactice Experiences you should know about

1. Scroll-driven animations

WebPlatform status - Limited Availability.
Safari and Firefox still do not support this feature yet, but they are pretty close to it.

No more GSAP and Framer motion, no heavy client-side javascript, on top of all, these animations have great tooling and documentation.

Even though this is a relatively new feature, we have a set of nice dev tools to debug scroll-driven animations, and all animations in general. I think this is one of the biggest advantages of this new feature.

You can integrate it using polyfill: from this repo

2. Same-document view transitions for single-page applications

WebPlatform status - Limited Availability.
Safari and Firefox do not support it well.

Already well-known young solution for SPA transitions, a huge field to experiment and explore. Comes with a dedicated dev tool as well.

When a view transition runs on a single document it is called a same-document view transition. This is typically the case in single-page applications (SPAs) where JavaScript is used to update the DOM. Same-document view transitions are supported in Chrome as of Chrome 111.

How it works

When invoked, the browser automatically captures snapshots of all elements that have a view-transition-name CSS property declared on them.

It then executes the passed in callback that updates the DOM, after which it takes snapshots of the new state.

These snapshots are then arranged in a tree of pseudo-elements and animated using the power of CSS animations. Pairs of snapshots from the old and new state smoothly transition from their old position and size to their new location, while their content crossfades. If you want, you can use CSS to customize the animations.

You can read more: in this article

3. View Transition CSS classes

Up until now, when animating multiple snapshots in the same way, you needed to target each and every snapshot individually by repeating its pseudo-selector for every element that has a unique view-transition-name.
With view-transition-class you can now add a shared name to all snapshots. Use this shared name in the pseudo selectors to target all snapshots that match. This results in far simpler selectors, which automatically scale from one to many elements.

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

More on this: here.

4. View Transition types

Before active types, you could add classes to the DOM and respond to those classes in your CSS. However, you'd also have to cleanup after the transitions were complete.
With view transition types you can achieve the same result, with the added benefit of these types automatically getting cleaned up once the view transition has finished. Types only apply when capturing or performing the transition.
For same-document view transitions, pass the types into the startViewTransition method which now accepts an object. update is the callback function that updates the DOM, and types is a sequence of strings.

For example, you can animate your pagination like this:

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
}););

To play around and explore more: here.

5. Cross-document view transitions

Last but not least, it is a multi-page application of view transitions! This was the most exciting update in my opinion.

TL;DR:

What's different when compared with same-document view transitions, is that with cross-document view transitions you don't need to call document.startViewTransition to start a view transition. Instead, the trigger for a cross-document view transition is a same-origin navigation from one page to another, an action that is typically performed by the user of your website clicking a link.
In other words, there is no API to call in order to start a view transition between two documents. However, there are two conditions that need to be fulfilled:

1. Both documents need to exist on the same origin.
2. Both pages need to opt-in to allow the view transition.

If you want to dive deeper into it, I highly recommend watching this 15-minute video from the conference.

Demo:

The code:

// OLD PAGE LOGIC
window.addEventListener('pageswap', async (e) => {
  if (e.viewTransition) {
    const targetUrl = new URL(e.activation.entry.url);

    // Navigating to a profile page
    if (isProfilePage(targetUrl)) {
      const profile = extractProfileNameFromUrl(targetUrl);

      // Set view-transition-name values on the clicked row
      document.querySelector(`#${profile} span`).style.viewTransitionName = 'name';
      document.querySelector(`#${profile} img`).style.viewTransitionName = 'avatar';

      // Remove view-transition-names after snapshots have been taken
      // (this to deal with BFCache)
      await e.viewTransition.finished;
      document.querySelector(`#${profile} span`).style.viewTransitionName = 'none';
      document.querySelector(`#${profile} img`).style.viewTransitionName = 'none';
    }
  }
});

// NEW PAGE LOGIC
window.addEventListener('pagereveal', async (e) => {
  if (e.viewTransition) {
    const fromURL = new URL(navigation.activation.from.url);
    const currentURL = new URL(navigation.activation.entry.url);

    // Navigating from a profile page back to the homepage
    if (isProfilePage(fromURL) && isHomePage(currentURL)) {
      const profile = extractProfileNameFromUrl(currentURL);

      // Set view-transition-name values on the elements in the list
      document.querySelector(`#${profile} span`).style.viewTransitionName = 'name';
      document.querySelector(`#${profile} img`).style.viewTransitionName = 'avatar';

      // Remove names after snapshots have been taken
      // so that we're ready for the next navigation
      await e.viewTransition.ready;
      document.querySelector(`#${profile} span`).style.viewTransitionName = 'none';
      document.querySelector(`#${profile} img`).style.viewTransitionName = 'none';
    }
  }
});

And, as usual, here are the docs to learn more: Chrome docs.

Conclusion

That covers everything I wanted to share with you. Of course, there are many more smaller updates that enhance the overall user experience, but I'm confident that the five mentioned above will soon become the standard.

So explore, experiment, and adopt!

Happy coding, everyone!