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 quite a lot of within the wild that each make you go wow and need to immediately use them by yourself web site or challenge.
On the identical time, view transitions will be tough to “get” at first. They are often easy, certain, however most something past a cross-fade entails a number of transferring elements.
I have a tendency to seek out that the easiest way to study 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 fundamental 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 essentially the most, however if you wish to perceive what view transitions are all about, then I like to recommend going via a fast introduction first earlier than attending to the recipes.
Oh, and earlier than we leap 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 could or might not be supported by a selected browser, so control that and take a look at, as at all times.
The setup
For every view transition, we’ll have to do some setup beforehand. First off, we have to decide 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 the event you’re utilizing templates in your web site, then this may go within the header template so it globally applies in every single place.
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
sorts: ;
}
} That sorts descriptor, one thing we’ve lined intimately earlier than. It’s extra nuanced than this, however sorts are mainly the animation title we give to a selected transition. That approach, if we’re working with a number of transitions, we will be express about which of them are lively to stop 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 desires 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;
sorts: ;
}
} …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 at liberty to make use of any of those in your individual experiments or tasks.
Pixelate dissolve
This one’s kind of like a easy cross-fade, however blurs issues out because the outdated web page content material fades out and the brand new web page content material fades in.
Full snippet
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
sorts: 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 attain the “wipe-up” impact we’re the content material for a brand new web page slides up from the underside, changing the “outdated” 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%. That 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.
Full snippet
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
sorts: 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 direction of the appropriate. 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 kind of cope with 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 a little bit, um, bizarre. Positively not essentially the most sensible factor on this planet, but it surely does reveal how far you may go together with view transitions.
We use the the scale() and rotate() capabilities to zoom and rotate the web page content material, the place the “outdated” 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. A bit opacity is thrown in to assist in giving the phantasm that stuff goes out and coming in.
Full snippet
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
sorts: 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 {
remodel: scale(0) rotate(180deg);
opacity: 0;
}
}
@keyframes zoom-rotate-in {
from {
remodel: 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 “outdated” 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 whole web page.
Full snippet
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
sorts: 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 “outdated” web page with the “new” web page from the bottom-right nook of the display 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. Then it is available in from the alternative nook to its default place at 0%. A bit opacity helps clean issues out.
Full snippet
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
sorts: 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 {
remodel: translate(-100%, -100%);
opacity: 0;
}
}
@keyframes diagonal-in {
from {
remodel: translate(100%, 100%);
opacity: 0;
}
}Curtain reveal
This one’s just like the a curtain is closing on the “outdated” 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!
Full snippet
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
sorts: 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 kind of faking one web page “flipping” out like a two-sided card whereas the following web page flips in, each alongside the Z axis.
Full snippet
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
sorts: 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% {
remodel: rotateY(0deg) translateX(0vw);
}
100% {
remodel: rotateY(-90deg) translateX(-100vw);
opacity: 1;
}
}
@keyframes flip-in {
0% {
remodel: rotateY(90deg) translateX(100vw);
}
100% {
remodel: rotateY(0deg) translateX(0vw);
}
}Any cool recipes you need to share?
I’d love to see extra examples and concepts when 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 can be undoubtedly price .
