This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Planning & Fancy Demo" Lesson
[00:00:00]
>> Sarah Drasner: So if we're planning, we might want to see what elements are similar between pages. That's a lot of times I'll do these really dumb quick doodles, just to plot things out. You don't have to make beautiful storyboards or anything, this actually saves me a lot of time.
[00:00:18] I draw out the page really quickly, I say okay, well that nav is pretty similar to this nav. Maybe I just wanna make this one thing transition in a similar way to that other thing. And you can kind of see what things are kind of related between pages very quickly.
[00:00:35] The things that need to stay constant can live outside of the pages. And then in layouts/default.vue, I've got all of the navigation elements. We saw this setup earlier, this is just review for how Next is set up. And we can get fancier and do something like that demo that you saw earlier, where we've got a lot of things happening.
[00:01:00] But one thing you might notice with this demo is, actually let's go to the actual demo, I think it's called next-type. That now.sh means that I'm deploying on that ZEIT Now thing that I mentioned earlier. I'm not paying for it, you end up getting that URL that says .now.sh, it's actually a really great deployment.
[00:01:25] If you hit this NEXT UP, you can see that these mountains or whatever they are in the background, and it's a little bit clearer to see on your own machine probably. They all have slightly different transitions, and those words also have slightly different transitions, they're not transitioning the same way every time.
[00:01:47] Because they looked dumb sharing the same transition, to be totally honest. Some of them were longer and having them fold didn't necessarily work right for each one. So I could plug into different transitions for each different type of thing. And all of these kind of circles and things that you probably can't see at the letters, there's these circles and things, they all had to come in differently.
[00:02:13] So that's really, really useful to have those different types of page transitions.
>> Sarah Drasner: This is a lot of code that if you're interested in GreenSock, we could go into, but we're also really running on low on time, so I'm not going to go into it.