This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Animation Design Summary" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Rachel Nabors: So let's have a moment to review a site that I am a big fan of. It has music, so I am gonna have to mute it. It's a band site, and get this, one of the members of the band used to be a Flash developer. So when they needed a site.
[00:00:20] What did he do? He built it using SVG and a heck of a lot of animation. But it's also a really great example of some sophisticated animations. Let's go on an animation safari. And I genuinely wish I had a little safari hat I could put on right now, but I don't.
[00:00:34] But we're gonna go a little animation safari and see how many supplemental animations and transitions and causal effects we can spot. Ready? Ding. The band is A Love Like Pi. And as you can see, it's got this is beautiful central animation. It's a showcase. So it's decorative, but it makes sense.
[00:00:55] And when we click on this button up here, notice that there's a stateful transition over to this other section to show people where they are in space and that they're seeing something new. When you close it, notice it transitioned out perfect. Perfect, it's a 10 out of 10.
[00:01:09] Look at this. They're drawing attention to the map by outlining it. And when you hover over these, more information, supplemental animation brings it in. Well that's bad. It took us to a new page, that's a jump cut. No fair, get rid of that thing. The only animations on this page are scrolling.
[00:01:26] All right, here we go back to the beautiful page. And we click on this one. I'm a little upset that there's no hover effect on those icons up there, but now there's a fade and a push in when it takes us to a different space. This is the videos and images of the band, and notice how we keep moving through space.
[00:01:46] To see these things, we are moving through space. The images are the only things that are jump cutting. Every single navigation feature on this page is animated. Look at that, takes us back to where we came from. My only concern is that it's a little bit difficult to figure out how to get back to the main page from here.
[00:02:05] You have to remember, to use the navigation up in the upper right. Which is just, I don't know, that feels like an oversight on my part.
>> Rachel Nabors: So yeah. And the reason why those all work together is probably because the person who did this used to be a Flash developer and had many hours just doing this sort of thing until figuring out how it felt right.
[00:02:32] And that takes a lot of time. You'll definitely find it difficult to find any of these things codified anywhere at this time. Even game designers. I've looked at the books. There aren't a lot of books that will be like, this is a stateful transition from one information space to the other.
[00:02:48] Most people just pick this up as they go along. And you're going to pick this up as you go along too. I'm just trying to help you verbalize the animations, because I find people learn a lot faster, and they make better choices when they can verbalize the reasoning behind that.
[00:03:00] So hopefully, you'll be able to create something this beautiful one day without having to create a whole lot of flash micro sites to get there.
>> Rachel Nabors: [SOUND] Do we have any questions? I see a question from the person wearing a shirt that says rogue. I like your choice in shirt names.
[00:03:21]
>> Audience: Thanks. For the clarification, that site's not built in Flash, right?
>> Rachel Nabors: No, that site is-
>> Audience: It's entirely HTML-
>> Rachel Nabors: And a lot of SVG.
>> Audience: A lot of SVG and animation.
>> Rachel Nabors: Well, I think it is CSS animation on SVG, or they might be using GreenSock.
[00:03:36] I forgot to check. But there's no reason that you couldn't do a site like that just using CSS.
>> Audience: Right, nice.
>> Rachel Nabors: I know, you'd think that site had been built in flash, but that is what. It also plays music when you arrive, and it's super pretty.
>> Speaker 3: Also, Sarah Drasner has a really good course.
[00:03:57]
>> Rachel Nabors: She's gonna ask a good question.
>> Speaker 3: No, she has a really good course. So, she actually did a course on SVG, advanced SVG animation.
>> Rachel Nabors: Sarah Drasner is an excellent, excellent SVG animator. Is that a Front End Masters course?
>> Speaker 3: Yeah.
>> Rachel Nabors: Well, you should check that out in the Front End Masters library [LAUGH].
[00:04:16]
>> Speaker 3: If you're interested in that kind of stuff, like she is, a lot of it with.
>> Rachel Nabors: I can highly recommend Sarah Drasner's SVG animation work.