Creating a Custom Element Transition

For the right design, transitioning individual elements between pages can provide an impressive effect.

Consider a view that contains a grid of articles. A small change in your markup could allow you to transition an individual article as the user navigates from an teaser view to a detail view. This can be done using the view-transiton-name style.

You might assume in this case that we could give the article element a view-transition name of 'article'. This unfortunately won't currently work for a grid of articles. As of now, the view transitions API requires transition names to be unique on an individual page. If one page contains multiple elements with the same view transition name, the transition will be ignored.

This can be solved by including a unique ID in your transition name. Drupal can make this straightforward, since the node ID will be available to your template. In this example, we'll be using an inline style to define these unique transition names:

style=view-transition-name: node-id

Where 'id' is the unique node ID.

First, we'll update our node--card.html.twig template to set these unique transition names.

change:

<article{{ attributes.addClass(classes) }}>

to:

<article{{ attributes.addClass(classes).setAttribute('style', 'view-transition-name: node-' ~ node.id) }}>

This will add the necessary transition name to each card included on a page.

Next, you'll need to make the same change to node--article--full.html.twig

With this change in place, you'll see article elements transition between pages. This same approach could be used for any element on your site.