Pleasant UI Animations With Shared Ingredient Transitions API (Half 1) — Smashing Journal

It seems significantly better, doesn’t it? Once more, with only a few further strains of CSS and JavaScript, we managed to create this advanced transition between the 2 states that might in any other case take us hours to create.

We’ve instructed the browser to observe for measurement and place adjustments between the UI states by tagging our shared lively picture aspect with a novel id and making use of particular animation. That is the default habits for parts with the page-transition-tag set. Within the subsequent few examples, we’ll discover ways to customise animation properties aside from opacity, place, and measurement.

Customizing Animation Period And Easing Operate

We’ve created this advanced transition with only a few strains of CSS and JavaScript, which turned out nice. Nevertheless, we count on to have extra management over the animation properties like period, easing operate, delay, and so forth to create much more elaborate animations or compose them for even better impact.

Shared Ingredient Transitions API makes use of CSS animation properties and we will use them to totally customise our state animation. However which CSS selectors to make use of for these outgoing and incoming states that the API is producing for us?

Shared Ingredient Transition API introduces new pseudo-elements which are added to DOM when its animations are run. Jake Archibald explains the pseudo-element tree in his Chrome builders article. By default (in case of crossfade animation), we get the next tree of pseudo-elements:

::page-transition
└─ ::page-transition-container(root)
   └─ ::page-transition-image-wrapper(root)
      ├─ ::page-transition-outgoing-image(root)
      └─ ::page-transition-incoming-image(root)

These pseudo-elements could seem a bit complicated at first, so I’m together with WICG’s concise rationalization for these pseudo-elements and their common function:

• ::page-transition sits in a top-layer, over every thing else on the web page.
• ::page-transition-outgoing-image(root) is a screenshot of the previous state, and ::page-transition-incoming-image(root) is a stay illustration of the brand new state. Each render as CSS changed content material.
• ::page-transition-container animates measurement and place between the 2 states.
• ::page-transition-image-wrapper supplies mixing isolation, so the 2 photos can accurately cross-fade.
• ::page-transition-outgoing-image and ::page-transition-incoming-image are the visible states to cross-fade.

For instance, after we apply the page-transition-tag: active-image, its pseudo-elements are added to the tree:

::page-transition
├─ ::page-transition-container(root)
│  └─ ::page-transition-image-wrapper(root)
│     ├─ ::page-transition-outgoing-image(root)
│     └─ ::page-transition-incoming-image(root)
└─ ::page-transition-container(active-image)
   └─ ::page-transition-image-wrapper(active-image)
      ├─ ::page-transition-outgoing-image(active-image)
      └─ ::page-transition-incoming-image(active-image)

In our instance, we wish to modify each the crossfade (root) animation and the shared aspect animation. We will use the common selector * with the pseudo-element to vary animation properties for all obtainable transition parts and goal pseudo-elements for particular animation utilizing the page-transition-tag worth.

On this instance, we’re making use of 400ms period for all animated parts with an ease-in-out easing operate, after which override the active-image transition easing operate and setting a customized cubic-bezier worth:

::page-transition-container(*) {
  animation-duration: 400ms;
  animation-timing-function: ease-in-out;
}

::page-transition-container(active-image) {
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

Function Detection And Fallbacks

We acquired barely carried away and made this instance unusable on browsers that don’t assist the API, so let’s repair that. We have to add some function checks and fallbacks to be sure that the web site stays usable for all customers.

Function detection in JavaScript is so simple as checking if the createDocumentTransition operate exists:

const isSupported = "createDocumentTransition" in doc;

if(isSupported) {
    /* Shared aspect transitions API is supported */
} else {
    /* Shared aspect transitions API will not be supported */
}

In CSS, we will use the @helps tag to use types primarily based on function assist conditionally. That is helpful if you wish to present a much less splendid however nonetheless efficient normal CSS transition or animation:

@helps (page-transition-tag: none) {
    /* Shared aspect transitions API is supported */
    /* Use the Shared Ingredient Transisitons API types */
}

@helps not (page-transition-tag: none) {
    /* Shared aspect transitions API will not be supported */
    /* Use a easy CSS animation if potential */
}

If we have to assist even older browsers, we will conditionally apply the CSS class utilizing JavaScript:

if("createDocumentTransition" in doc) {
  doc.documentElement.classList.add("shared-elements-api");
}

html.shared-elements-api {
    /* Shared aspect transitions API is supported */
}

html:not(.shared-elements-api) {
    /* Shared aspect transitions API will not be supported */
}

We will take a look at our instance on a browser that doesn’t assist the API and see that the operate nonetheless runs however will not be animated.

See the Pen [Image gallery – fallback (5) [forked]](https://codepen.io/smashingmag/pen/yLjMBLb) by Adrian Bece.

Accessible Animations

It’s necessary to concentrate on accessibility necessities when working with animations. Some individuals desire searching the net with diminished movement, so we should both take away an animation or present a extra appropriate various. This may be simply carried out with a extensively supported prefers-reduced-motion media question.

The next code snippet turns off animations for all parts utilizing the Shared Ingredient Transitions API. This can be a shotgun resolution, and we have to be sure that DOM updates easily and stays usable even with the animations turned off:

@media (prefers-reduced-motion) {
    /* Flip off all animations */
    ::page-transition-container(*),
    ::page-transition-outgoing-image(*),
    ::page-transition-incoming-image(*) {
        animation: none !necessary;
    }

    /* Or, higher but, create accessible options for these animations  */
}

See the Pen [Image gallery -completed (6) [forked]](https://codepen.io/smashingmag/pen/RwypbPz) by Adrian Bece.

To-do Listing With Customized Animations

Now that we acquired acquainted with the fundamentals of the Shared Ingredient Transitions API, we will transfer on to extra advanced examples and deal with composing animations and using CSS animation properties and @keyframe to totally customise the animations.

Let’s create an interactive to-do checklist with 3 column containers: duties in progress, accomplished duties, and gained’t-do duties. We’ll use an identical method as earlier than and customise the animation to make the movement extra pure and bouncier. Clicked merchandise will subtly scale up because it leaves the guardian container and can reduce down and barely bounce when it strikes to a goal container. The remaining to-do checklist parts also needs to be animated easily to maneuver over to the empty house.

Beginning Markup, Kinds And JavaScript

We’ll use a really related method with transferring parts round as within the earlier instance, so we’ll begin with the Shared Ingredient API already applied with a default crossfade animation. Try the next CodePen for extra particulars.

See the Pen [To-do list – shared element transitions API (1) [forked]](https://codepen.io/smashingmag/pen/qBYrWbQ) by Adrian Bece.

Let’s dive proper into the JavaScript code. We’ve an identical setup right here as within the earlier instance. The one distinction is that we will have two potential goal containers for our gadgets within the to-do checklist: the second (“Achieved”) or the third column (“Received’t-do”).

async operate moveCard(isDone) {
  // Choose the lively card. 
  const card = this.window.occasion.goal.closest("li");

  // Get the goal checklist id.
  const vacation spot = doc.getElementById(
    `js-list-${isDone ? "carried out" : "not-done"}`
  );

  //We'll use this class to cover the merchandise controls whereas the animation is working.
  card.classList.add("card-moving");

  if (doc.createDocumentTransition) {
    const moveTransition = doc.createDocumentTransition();

    // Run animation.
    await moveTransition.begin(() => vacation spot.appendChild(card));
  } else {
    // Fallback.
    vacation spot.appendChild(card);
  }
}

Discover how the Shared Ingredient Transitions API freezes rendering, and we can’t work together with some other aspect on the web page whereas the animation is working. This is a vital limitation to bear in mind, so it’s finest to keep away from creating prolonged animations that may hurt usability and annoy customers.

Creating Shared Ingredient Transition

Let’s begin by including page-transition-tag values to our card parts and organising a primary place animation.

We’ll use two completely different units of page-transition-tag values for this instance:

• card-active: for a component that’s presently being moved to a different column. We’ll apply this tag proper earlier than the animation runs and take away it as soon as it ends;
• card-${index + 1}: for different parts that are being moved inside the first column to fill the empty house left by an animated card. They’ll have a novel tag primarily based on their index.

// Assign distinctive page-transition-tag values to all process playing cards.
// We might have additionally carried out this manually in CSS by concentrating on :nth-child().
const allCards = doc.querySelectorAll(".col:not(.col-complete) li");
allCards.forEach(
    (c, index) => (c.fashion.pageTransitionTag = `card-${index + 1}`)
);

async operate moveCard(isDone) {
  const card = this.window.occasion.goal.closest("li");
  const vacation spot = doc.getElementById(
    `js-list-${isDone ? "carried out" : "not-done"}`
  );

  //We'll use this class to cover the merchandise controls whereas the animation is working.
  card.classList.add("card-moving");

  if (doc.createDocumentTransition) {
    // Exchange the merchandise tag with an lively (transferring) aspect tag.
    card.fashion.pageTransitionTag = "card-active";

    const moveTransition = doc.createDocumentTransition();
    await moveTransition.begin(() => vacation spot.appendChild(card));

    // Take away the tag after the animation ends.
    card.fashion.pageTransitionTag = "none";
  } else {
    vacation spot.appendChild(card);
  }
}

After all, we additionally want so as to add a include property to our playing cards that are checklist parts in our instance. With out the property, the animation wouldn’t break, however it might fall again to the default crossfade animation.

Notice: Sooner or later, this habits may change, and the DOM replace will happen with out the animation.

li {
  include: paint;
}

And, identical to that, we’ve got a very nice place animation arrange for our card parts. Discover how we’re doing nothing extra than simply toggling page-transition-tag values and making use of the include: paint worth in our CSS, and we’re getting all these pleasant animations.

See the Pen [To-do list – with shared element (2) [forked]](https://codepen.io/smashingmag/pen/YzLZKpo) by Adrian Bece.

This animation seems alright, nevertheless it feels considerably inflexible on this instance. What provides? Generally the animation will look spectacular proper out of the field, like within the earlier instance. Different instances, nevertheless, it is going to require some tuning. It normally is dependent upon the movement, animation sort, goal appear and feel, and function of the animation.

Creating A Scaling And Bouncing Animation

We will take full benefit of CSS animation properties and create our customized keyframes for animation pseudo-elements to attain the bouncing impact.

First, we’ll barely enhance the animation-duration worth of the place animation. Despite the fact that ::page-transition-container animates the scale and place, we’re utilizing its direct youngster ::page-transition-image-wrapper for scaling animation, so we don’t override the default positioning and measurement animation. We’re additionally barely delaying the dimensions animation simply to make it stream higher.

And at last, we’re adjusting the animation-duration worth for all parts so every thing stays in sync, and we’re making use of a customized cubic-bezier timing operate to attain the ultimate bouncing impact:

/* We're making use of include property on all browsers (no matter property assist) to keep away from variations in rendering and introducing bugs */
li {
  include: paint;
}

@helps (page-transition-tag: none) {
  ::page-transition-container(card-active) {
    animation-duration: 0.3s;
  }

  ::page-transition-image-wrapper(card-active) {
    animation: popIn 0.3s cubic-bezier(0.64, 0.57, 0.67, 2) 0.1s;
  }
}

@keyframes popIn {
  from {
    rework: scale(1.3);
  }
  to {
    rework: scale(1);
  }
}

With only a few minor tweaks and a customized animation keyframe definition, we’ve created a pleasant and eccentric animation to make our to-do instance a bit extra thrilling.

See the Pen [To-do list – jumping & bouncing animation (3) [forked]](https://codepen.io/smashingmag/pen/YzLZKZm) by Adrian Bece.

Picture Carousel With Customized Crossfade Animation

Let’s transfer on to a less complicated instance during which we’ll preserve the deal with creating customized animation keyframes for each outgoing and incoming photos.

We’ll create a crossfading picture carousel. That is the primary concept that popped into my thoughts once I noticed the Shared Ingredient Transitions API announcement video. Final yr, I constructed an internet app to assist me preserve monitor of my music assortment, which shows a particulars web page for every launch. On that web page, I’ve added a easy picture carousel that exhibits photos of an album cowl, booklet, and packaging.

I grabbed the supply code and simplified it for this instance. So, let’s create a barely extra elaborate crossfade animation for this aspect and mess around with CSS filters.

Photosensitivity warning: This instance includes animating picture brightness to imitate a lightning flash. If this is applicable to you, skip the next video and embedded examples. You possibly can nonetheless observe the instance and create customized crossfade transition by omitting brightness values from CSS.

Beginning Markup, Kinds And JavaScript

On this instance, we’ll showcase how we will run Shared Ingredient Transitions API to animate even the smallest adjustments, like altering a single HTML property. As a proof of idea, we’ll have a single picture HTML aspect, and we’ll change its src property as lively picture adjustments:

<part class="gallery">
  <img src="https://smashingmagazine.com/2022/10/ui-animations-shared-element-transitions-api-part1/..." id="js-gallery" decoding="sync" loading="keen" />
  <apart class="gallery__controls">
    <div class="gallery__status">
      <span id="js-gallery-index">1</span> / 11
    </div>
    <button onclick="previousImage()" class="gallery__button">
      <!-- ... -->
    </button>
    <button onclick="nextImage()" class="gallery__button">
      <!-- ... -->
    </button>
  </apart>
</part>

Let’s take a look at our JavaScript file. Now we’ve got two capabilities, particularly for transferring backwards and forwards within the picture array. We’re working the identical crossfade animation on each capabilities, and every thing else is just about the identical as in earlier examples:

// Let's retailer all photos in an array.
const photos = [ "https://path.to/image-1.jpg", "https://path.to/image-2.jpg", "https://smashingmagazine.com/2022/10/ui-animations-shared-element-transitions-api-part1/..."];
let index = 0;

operate previousImage() {
  index -= 1;

  if (index < 0) {
    index = photos.size - 1;
  }

  updateIndex();
  crossfadeElements();
}

operate nextImage() {
  index += 1;

  if (index >= photos.size) {
    index = 0;
  }

  updateIndex();
  crossfadeElements();
}

// Util capabilities for animation, index replace and picture src replace.

async operate crossfadeElements() {
  if (doc.createDocumentTransition) {
    const imageTransition = doc.createDocumentTransition();
    await imageTransition.begin(updateImage);
  } else {
    updateImage();
  }
}

operate updateIndex() {
  const galleryIndex = doc.getElementById("js-gallery-index");
  galleryIndex.textContent = index + 1;
}

operate updateImage() {
  const gallery = doc.getElementById("js-gallery");
  gallery.src = photos[index];
}

We’ll begin with default crossfade animation, so we will focus extra on the CSS and customizing animation properties.

See the Pen [Crossfade image carousel – setup (1) [forked]](https://codepen.io/smashingmag/pen/YzLZzVN) by Adrian Bece.

Making use of Customized Keyframes

Let’s make this crossfade animation a bit extra elaborate by enjoying round with customized animation keyframes. We’re making a crossfade animation that imitates a lightning flash.

Let’s create the next keyframes:

• fadeOut: the present picture will turn into blurrier and enhance in brightness as its opacity worth animates from 1 to 0;
• fadeIn: the following picture will turn into much less blurry and reduce in brightness as its opacity worth animates from 0 to 1.

@keyframes fadeOut {
    from {
        filter: blur(0px) brightness(1) opacity(1);
    }
    to {
        filter: blur(6px) brightness(8) opacity(0);
    }
}

@keyframes fadeIn {
    from {
        filter: blur(6px) brightness(8) opacity(0);
    }
    to {
        filter: blur(0px) brightness(1) opacity(1);
    }
}

Now, all we’ve got to do is assign the exit animation to the outgoing picture pseudo-element and the entry animation to the incoming picture pseudo-element. We will set a page-transition-tag on to the HTML picture aspect because it’s the one aspect that can carry out this animation:

/* We're making use of include property on all browsers (no matter property assist) to keep away from variations in rendering and introducing bugs */
.gallery img {
    include: paint;
}

@helps (page-transition-tag: supports-tag) {
    .gallery img {
        page-transition-tag: gallery-image;
    }

    ::page-transition-outgoing-image(gallery-image) {
        animation: fadeOut 0.4s ease-in each;
    }

    ::page-transition-incoming-image(gallery-image) {
        animation: fadeIn 0.4s ease-out 0.15s each;
    }
}

Even the seemingly easy crossfade animations can look cool, don’t you assume? I believe this explicit animation suits actually properly with the darkish theme we’ve got within the instance.

See the Pen [Crossfade image carousel – completed (2) [forked]](https://codepen.io/smashingmag/pen/gOzbZXB) by Adrian Bece.

Elaborate Add-to-cart Animation

In our last instance, we’ll construct the mission we launched within the very first video on this article. We lastly get to construct a neat add-to-cart animation!

In our earlier examples, we ran a single customized animation on a single aspect. On this instance, we’ll create two animations that run one after one other. First, the clicking occasion will activate the dot that strikes to the cart icon, after which the cart counter worth change shall be animated.

No matter animation complexity, Shared Ingredient Transitions API streamlines the entire course of and fingers us full management over the feel and appear of the animation.

Beginning Markup, Kinds And JavaScript

As within the earlier examples, we’ll begin with a primary markup and elegance setup and a primary crossfade animation:

// Choose static web page parts and initialize the counter.
const counterElement = doc.getElementById("js-shopping-bag-counter");
let counter = 0;

async operate addToCart() {
    const dot = createCartDot();
    const guardian = this.window.occasion.goal.closest("button");

    // Set the dot aspect to its beginning place in a button.
    guardian.append(dot);

    // Dot transition.
    if (doc.createDocumentTransition) {
        const moveTransition = doc.createDocumentTransition();
        // Transfer the dot to the cart icon.
        await moveTransition.begin(() => moveDotToTarget(dot));
    }

    // Take away the dot after the animation completes.
    dot.take away();

    // Counter transition.
    if (doc.createDocumentTransition) {
        const counterTransition = doc.createDocumentTransition();
        await counterTransition.begin(() => incrementCounter(counterElement));
    } else {
        incrementCounter();
    }
}

// Util capabilities for creating the dot aspect, transferring the dot to focus on, and incrementing the counter.

operate moveDotToTarget(dot) {
    const goal = doc.getElementById("js-shopping-bag-target");
    goal.append(dot);
}

operate incrementCounter() {
    counter += 1;
    counterElement.innerText = counter;
}

operate createCartDot() {
    const dot = doc.createElement("div");
    dot.classList.add("product__dot");
    return dot;
}

See the Pen [Add to cart animation – starting code (1) [forked]](https://codepen.io/smashingmag/pen/eYrvYXm) by Adrian Bece.

Creating Composed Animations

First, we have to toggle a page-transition-tag worth for our dynamic dot aspect and the cart aspect of their respective transition animations:

async operate addToCart() {
   /* ... */

  if (doc.createDocumentTransition) {
    const moveTransition = doc.createDocumentTransition();
    await moveTransition.begin(() => moveDotToTarget(dot));
    dot.fashion.pageTransitionTag = "none";
  }

  dot.take away();

  if (doc.createDocumentTransition) {
    counterElement.fashion.pageTransitionTag = "cart-counter";
    const counterTransition = doc.createDocumentTransition();
    await counterTransition.begin(() => incrementCounter(counterElement));
    counterElement.fashion.pageTransitionTag = "none";
  } else {
    incrementCounter();
  }
}

/* ... */

operate createCartDot() {
  const dot = doc.createElement("div");
  dot.classList.add("product__dot");
  dot.fashion.pageTransitionTag = "cart-dot";

  return dot;
}

Subsequent, we’ll customise each animations with CSS. For the dot animation, we’ll change its period and timing operate, and for cart-counter, we’ll add a slight vertical motion to a regular crossfade animation.

Discover how the dot aspect doesn’t have animations or CSS properties for altering dimensions. Its dimensions reply to the guardian container. Its preliminary place is within the button container, after which it’s moved to a smaller cart icon container, which is positioned behind the counter. Shared Components API understands how aspect place and dimensions change in the course of the animation and offers us this elegant transition animation proper out of the field!

/* We're making use of include property on all browsers (no matter property assist) to keep away from variations in rendering and introducing bugs */
.product__dot {
  include: paint;
}

.shopping-bag__counter span {
  include: paint;
}

@helps (page-transition-tag: supports-tag) {
  ::page-transition-container(cart-dot) {
    animation-duration: 0.7s;
    animation-timing-function: ease-in;
  }

  ::page-transition-outgoing-image(cart-counter) {
    animation: toDown 0.3s cubic-bezier(0.4, 0, 1, 1) each;
  }

  ::page-transition-incoming-image(cart-counter) {
    animation: fromUp 0.3s cubic-bezier(0, 0, 0.2, 1) 0.3s each;
  }
}

@keyframes toDown {
  from {
    rework: translateY(0);
    opacity: 1;
  }
  to {
    rework: translateY(4px);
    opacity: 0;
  }
}

@keyframes fromUp {
  from {
    rework: translateY(-3px);
    opacity: 0;
  }
  to {
    rework: translateY(0);
    opacity: 1;
  }
}

And that’s it! It amazes me each time how elaborate these animations can end up with so few strains of further code, all due to Shared Ingredient Transitions API. Discover that the header aspect with the cart icon is fastened, so it sticks to the highest, and our normal animation setup works like a attraction, regardless!

See the Pen [Add to cart animation – completed (2) [forked]](https://codepen.io/smashingmag/pen/vYjxEOR) by Adrian Bece.

Conclusion

When carried out accurately, animations can breathe life into any mission and provide a extra pleasant and memorable expertise to customers. With the upcoming Shared Ingredient Transitions API, creating advanced UI state transition animations has by no means been simpler, however we nonetheless must be cautious how we use and implement animations.

This simplicity may give strategy to dangerous practices, reminiscent of not utilizing animations accurately, creating sluggish or repetitive animations, creating needlessly advanced animations, and so forth. It’s necessary to be taught finest practices for animations and on the internet so we will successfully make the most of this API to create really superb and accessible experiences and even seek the advice of with the designer if we’re uncertain on the right way to proceed.

Within the subsequent article, we’ll discover the API’s potential in the case of transition between completely different pages in Single Web page Apps (SPA) and the upcoming Cross-document same-origin transitions, that are but to be applied.

I’m excited to see what the dev neighborhood will construct utilizing this superior new function. Be happy to succeed in out on Twitter or LinkedIn when you have any questions or for those who constructed one thing superb utilizing this API.

Go forward and construct one thing superior!

Many due to Jake Archibald for reviewing this text for technical accuracy.

References

(vf, yk, il)