Page Transitions

[00:00:00]
>> Sarah Drasner: Another thing that you can do once you're kind of done making prototypes is you can do things like page transitions. And so I made this demo that shows how to create these kind of smooth page transitions even with interaction on a view application. And basically, the way that it works is within middle ware and the Vue X store, Vue X is a little like redux.

[00:00:23]
I'm storing what's page it's on and then I have CSS transitions that work from page to page and I have the same things transitioned. So basically, that if I restart this, this piece is consistent across a bunch of different routes. But the nav it stays for each one of those routes.

[00:00:44]
So I did a write-up of how this is all made for Vue, and then a friend forked it to React, and then another friend forked it to Angular. So if you're working within any one of those frameworks, and you wanna try to make these kind of smooth page transitions across your applications.

[00:01:03]
If you're using one of those three applications those examples exist and are all open source for you to check out.
>> Sarah Drasner: Another way that I kinda plan these out, I thought I would show you something that's like, a work in progress. And I'm changing, I'm in the middle of changing this.

[00:01:23]
So, this is an original dribble shot that that somebody made, and I'm going to completely redo all of these pieces like we showed about the remixing before. But the first thing I do is I take the similar objects, and I keep some of them static across things, and then for some of them, I make them bigger.

[00:01:47]
Some of the pieces stay consistent, some of them drop down, some of them go away, but basically, I'm just keeping that all in one art board so I can move little pieces around. And I can see how it would change and adjust for either different screen sizes or for different views of those pages.

[00:02:05]
So that's how I made that page transitions one as well. Is I kept some pieces consistent across each of the things and just changed maybe their scale or maybe it has a rounded corner now, or something like that. So that's one that you could work with that. Lee Long if you don't know his work, does this awesome dribble shots, he's not a developer, these are all just imaginations of things, so he makes these an After Effects.

[00:02:35]
So he makes all of these an After Effects and exports them as gifs so he hasn't really made them in code or anything. But if you wanted to like practice or even just get inspired by some of this stuff that he makes, they are really cool. Rally does really great things with Motion too.

[00:02:52]
Where they just have these subtle little transitions between effects. This is real, this is on websites and stuff, so you can go check out their code as well. Everything Rally does is gorgeous, and their typography is also really well done as well. They do things like this for their site where you have these different sections and this floating ribbon between each one of them.

[00:03:17]
And if you click it kind of expands and changes. This was always on a site that was like their beta site. They kept futzing with it and they wouldn't ship it because they were being too perfectionist about it. So if you go to their site and this isn't it, you have to go to like beta.rally or something.

[00:03:35]
They just never were happy enough with it, but I think it's gorgeous. There's also, this one's not rally, I miss attributed it this is somebody else on dribble. I should change this thing, but I thought it was a really nice transition. It's a nice way, it's another time where you can use SVG or SVG filters to kind of make page transitions come to life.

[00:04:01]
Codrops, how many of you know Codrops? Just like three, not that many of you. Go to Codrops immediately, they're amazing. This is one example of 1,700 and they show you how to make all of these things in code. So all of their examples are like this good. And they're all different, and they all are just fantastic.

[00:04:26]
And a lot of them use CSS Grid, too. So if you wanna learn CSS Grid a little bit better, and some of these great effects, man, they're geniuse, check it out. Cool, if you do wanna check it out and create these kind of animations tomorrow, I have a whole course where we go into some of this stuff.

[00:04:43]
But there's this idea called flip on the web, and its a way to get really performing animations. So the way that you do that is you get the bounding client rec, which is just like the x, y, width, height coordinates of the first state of the thing. And then you get the end state and how big that is.

[00:05:06]
And then you find the space in between there. If that doesn't sound like fun to you, which it might not, David Khourshid, who you should definitely check out his work, he's also a great animator, has a thing called Flippy. It's a library that he created, so that you can create some of those effects.

[00:05:25]
It's really nice, and it doesn't need the framework. So if you're not framework person, or if you're a framework person you can use them. In Vue, we do this stuff under the hood. You can just wrap a thing in a thing called transition group, and all of that calculation happens for you, how cool is that?

[00:05:44]
That's awesome, Vue is great, [LAUGH]. If you want to use something that also does a lot of hardware acceleration for you under the hood, GreenSock or GSAP does that, and you don't have to manually hardware accelerate anything there, already doing that. They're gonna assume that you want hardware acceleration, and they have a flag where you can tell it not to be hardware accelerated if you'd ever want that.