7 View Transitions Recipes to Attempt

View transitions are actually, actually neat. Not solely that, however they’re beginning to pop up in every single place. I’m certain you’re like me and have come throughout various within the wild that each make you go wow and wish to immediately use them by yourself web site or undertaking.

On the identical time, view transitions might be tough to “get” at first. They are often easy, certain, however most something past a cross-fade includes a number of shifting components.

I have a tendency to seek out that one of the simplest ways to be taught one thing new is to see the code, use them myself, after which construct upon them. So, I’ve collected seven view transition recipes for precisely that. We’ll go over the essential setup, demo the recipes, and switch you unfastened to experiment!

It’s completely high quality to go beneath and simply copy the one you want probably the most, however if you wish to perceive what view transitions are all about, then I like to recommend going by means of a fast introduction first earlier than attending to the recipes.

Oh, and earlier than we soar in, it’s price noting that view transitions are certainly Baseline and supported by all main browsers as I’m scripting this. However some varieties of animations might or will not be supported by a particular browser, so control that and check, as all the time.

The setup

For every view transition, we’ll have to perform a little setup beforehand. First off, we have to choose in to them utilizing the @view-transition at-rule on each pages — the web page we’re on and the web page we’re transitioning to. In case you’re utilizing templates in your web site, then this would possibly go within the header template so it globally applies in every single place.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    varieties: ;
  }
}

That is the one half you possibly can’t immediately copy-paste. It’s a placeholder for the varieties descriptor, one thing we’ve lined intimately earlier than. It’s extra nuanced than this, however varieties are mainly the animation identify we give to a particular transition. That method, if we’re working with a number of transitions, we might be specific about which of them are energetic to forestall them from conflicting with each other. However learn that linked article to get deeper into it.

Discover how we’ve the @view-transition walled behind the prefers-reduced-motion: no-preference media question. Not everybody needs motion on their pages and that’s a choice that may be set on the OS stage, so we’ll respect that the place wanted this fashion.

Lastly, we’ll apply our animation as follows:

html:active-view-transition-type()::view-transition-old(root) {
  animation: a-cool-outgoing-animation 1.4s ease forwards;
}

html:active-view-transition-type()::view-transition-new(root) {
  animation: a-cool-incoming-animation 1.4s ease forwards;
}

…the place the :active-view-transtion-type() pseudo matches the transition sort we outline in the @view-transition rule. For instance, if we’re calling an animation that we’ve named bounce, then we’d use that within the at-rule like this:

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    varieties: ;
  }
}

…in addition to the pseudo like this:

/* The "present" web page */
html:active-view-transition-type(bounce)::view-transition-old(root) {
  animation: bounce-in 1.4s ease forwards;
}

/* The web page we're transitioning to */
html:active-view-transition-type(bounce)::view-transition-new(root) {
  animation: bounce-in 1.4s ease forwards;
}

OK, that’s sufficient context to get began with the recipes. Once more, be happy to make use of any of those in your individual experiments or initiatives.

Pixelate dissolve

This one’s form of like a easy cross-fade, however blurs issues out because the previous web page content material fades out and the brand new web page content material fades in.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    varieties: pixelate-dissolve;
  }
}

html:active-view-transition-type(pixelate-dissolve)::view-transition-old(root) {
  animation: pixelate-out 1.4s ease forwards;
}

html:active-view-transition-type(pixelate-dissolve)::view-transition-new(root) {
  animation: pixelate-in 1.4s ease forwards;
}

@keyframes pixelate-out {
  0% {
    filter: blur(0px);
    opacity: 1;
  }
  100% {
    filter: blur(40px);
    opacity: 0;
  }
}

@keyframes pixelate-in {
  0% {
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}

Wipe up

Right here, we’re utilizing the clip-path property to realize the “wipe-up” impact we’re the content material for a brand new web page slides up from the underside, changing the “previous” content material.

The method is easy: for the outgoing web page, we transfer from its default inset() worth of 0 0 0 0 (which creates a rectangle on the prime, proper, backside, and left borders) of the web page and alter the backside worth to 100%. Which means, the web page goes from prime to backside.

The incoming web page begins clipping from the prime at 100% and goes all the way down to 0.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    varieties: wipe-up;
  }
}

html:active-view-transition-type(wipe-up)::view-transition-old(root) {
  animation: wipe-out 1.4s ease forwards;
}

html:active-view-transition-type(wipe-up)::view-transition-new(root) {
  animation: wipe-in 1.4s ease forwards;
}

@keyframes wipe-out {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 0 100% 0);
  }
}

@keyframes wipe-in {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

We may simply as simply make issues wipe proper, wipe backside, and wipe left just by altering the inset values. For instance, right here’s issues wiping proper:

@keyframes wipe-out {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 100%);
  }
}

@keyframes wipe-in {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

The wipe proper works equally to wipe up, besides that the outgoing web page goes from the middle and cuts in the direction of the precise. That’s why the second worth goes from 0 to 100%. Equally, the incoming web page goes from 100% from the left to 0.

Similar form of take care of wiping downward:

@keyframes wipe-out {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(100% 0 0 0);
  }
}

@keyframes wipe-in {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

You get the concept!

Rotate in-out

This one’s somewhat, um, bizarre. Positively not probably the most sensible factor on this planet, but it surely does show how far you possibly can go along with view transitions.

We use the the scale() and rotate() capabilities to zoom and rotate the web page content material, the place the “previous” web page scales all the way down to 0 and rotates clockwise by 180deg. Following that, the “new” web page content material scales as much as 1 and rotates counter-clockwise by -180deg. Slightly opacity is thrown in to assist in giving the phantasm that stuff goes out and coming in.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    varieties: zoom-rotate;
  }
}

html:active-view-transition-type(zoom-rotate)::view-transition-old(root) {
  animation: zoom-rotate-out 1.4s ease forwards;
  transform-origin: middle;
}

html:active-view-transition-type(zoom-rotate)::view-transition-new(root) {
  animation: zoom-rotate-in 1.4s ease forwards;
  transform-origin: middle;
}

@keyframes zoom-rotate-out {
  to {
    rework: scale(0) rotate(180deg);
    opacity: 0;
  }
}

@keyframes zoom-rotate-in {
  from {
    rework: scale(0) rotate(-180deg);
    opacity: 0;
  }
}

Circle wipe-out

This one’s much more delicate than the final one. It could possibly be much more noticeable if the content material we’re transitioning to is extra distinct. However as you’ll see within the following video, the “background between “previous” and “new” pages share the identical background, making for a extra seamless transition.

The circle comes courtesy of the clip-path property, attracts the form from the middle utilizing the circle() operate, going from from 0% (no dimension) to 150% (sized past the content material), making it encapsulate the complete web page.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    varieties: circular-wipe;
  }
}

html:active-view-transition-type(circular-wipe)::view-transition-old(root) {
  animation: circle-wipe-out 1.4s ease forwards;
}

html:active-view-transition-type(circular-wipe)::view-transition-new(root) {
  animation: circle-wipe-in 1.4s ease forwards;
}

@keyframes circle-wipe-out {
  to {
    clip-path: circle(0% at 50% 50%);
  }
}

@keyframes circle-wipe-in {
  from {
    clip-path: circle(0% at 50% 50%);
  }
  to {
    clip-path: circle(150% at 50% 50%);
  }
}

Diagonal push

This one pushes out the “previous” web page with the “new” web page from the bottom-right nook of the display screen to the top-right nook — or, actually, any nook we would like by adjusting values.

For the bottom-right, I set the animation to translate to -100% on the X and Y axes, which pushes it away from the display screen. Then it is available in from the other nook to its default place at 0%. Slightly opacity helps easy issues out.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    varieties: diagonal-push;
  }
}

html:active-view-transition-type(diagonal-push)::view-transition-old(root) {
  animation: diagonal-out 1.4s ease forwards;
}

html:active-view-transition-type(diagonal-push)::view-transition-new(root) {
  animation: diagonal-in 1.4s ease forwards;
}

@keyframes diagonal-out {
  to {
    rework: translate(-100%, -100%);
    opacity: 0;
  }
}

@keyframes diagonal-in {
  from {
    rework: translate(100%, 100%);
    opacity: 0;
  }
}

Curtain reveal

This one’s just like the a curtain is closing on the “previous” web page and opens up with the “new” web page. It’s one other one the place the inset() operate comes into play. We outline rectangles positioned 50% on the proper and left. This will increase to 50% when the web page goes out and reduces to 0 when the web page is coming in, making the picture seem from the center going to left and proper like a curtain!

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    varieties: curtain;
  }
}

html:active-view-transition-type(curtain)::view-transition-old(root) {
  animation: curtain-out 1.4s ease forwards;
}

html:active-view-transition-type(curtain)::view-transition-new(root) {
  animation: curtain-in 1.4s ease forwards;
}

@keyframes curtain-out {
  from {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes curtain-in {
  from {
    clip-path: inset(0 50% 0 50%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

3D flip

We’re form of faking one web page “flipping” out like a two-sided card whereas the subsequent web page flips in, each alongside the Z axis.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    varieties: flip-3d;
  }
}

html:active-view-transition-type(flip-3d)::view-transition-old(root) {
  animation: flip-out 1.4s ease forwards;
}

html:active-view-transition-type(flip-3d)::view-transition-new(root) {
  animation: flip-in 1.4s ease forwards;
}

@keyframes flip-out {
  0% {
    rework: rotateY(0deg) translateX(0vw);
  }
  100% {
    rework: rotateY(-90deg) translateX(-100vw);
    opacity: 1;
  }
}

@keyframes flip-in {
  0% {
    rework: rotateY(90deg) translateX(100vw);
  }
  100% {
    rework: rotateY(0deg) translateX(0vw);
  }
}

Any cool recipes you wish to share?

I’d love to see extra examples and concepts if in case you have them! Bramus (or Brandi, as I name him) took the time to create a bunch of view transition examples in an interactive demo which are undoubtedly price .