SVG Essentials & Animation, v2

Planning an Animation Review

SVG Essentials & Animation, v2

Check out a free preview of the full SVG Essentials & Animation, v2 course

The "Planning an Animation Review" Lesson is part of the full, SVG Essentials & Animation, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Students talk through their creations.


Transcript from the "Planning an Animation Review" Lesson

>> Sarah Drasner: All right, these are some awesome storyboards. I'm so excited about all of these. Let's talk through some of them. So Brandon, let's have you start, we'll look at this starburst animation.
>> Brandon: Yeah, for sure, so I tracked in an icon on the noun project, that had this really kind of interesting kind of explosive look.

And the first thing I thought when I saw it is, I wanna mess with the rotation and I wanna mess with the scaling of it. So there are those three kind of concentric circles there. In the second frame I kind of swamped the outer layer and the inner layer scaling and then twirled it around a little bit.

>> Sarah Drasner: Awesome! That's gonna be really fun. Cool. I'm so excited to see this all animated and moving. Christina Gordon does amazing SVG animation work. She's not in this room right now, so she's not gonna explain them. But you should definitely check out her code pen. Let's look at Andrea's.

>> Andrea: So I’m doing a dinosaur scene where he sees a rabbit, he eats the rabbit, and hes chewing on the rabbit. And then there's the asteroid and then you zoom out to see what happens to the earth.
>> Sarah Drasner: Awesome [LAUGH] that's great, I love it. It's like super like biodanger one of those Animal Planet scenes and then just none of it matters [LAUGH].

Cool, all right, Hank. Is Hank in the room?
>> Hank: Yeah, mine is pretty simple. It's just a mobile menu. But when you click on the menu button, it'll open up. And those hamburger menu lines will actually morph into text. And so they'll be some animation between the menu and then the text as well.

>> Sarah Drasner: Awesome. Yeah, and we're gonna play around a lot later with those timelines and manipulating those timelines. So that'll be a really fun one, too. Okay, one more. Jamie?
>> Jamie: Yeah, mine's pretty simple too. I was thinking about using that Q attribute that you were talking about and kind of moving the waves from side to side on an arc.

And then moving a cloud in and out and maybe doing something with the sunshine rays.
>> Sarah Drasner: Cool, that looks awesome. I'm so excited for all of these. All right, let's get cracking on animation. We've done our due diligence here, right?

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now