The Animation Challenge Solution4:10 with Guil Hernandez
This animation challenge is a great way to practice what you've learned so far. In this video, I'm going to show you my solution to the challenge.
So, how'd it go? 0:00 I hope you were able to create an SVG animation sequence similar to this. 0:01 Even if you created some parts of the animation sequence, that's great. 0:06 So now I'm gonna show you one way of doing this. 0:10 So in my style sheet, I created three key frame rules and 0:13 named the animation slide, grow and off set. 0:17 So the slide animation uses three key frames to create 0:22 that slide up motion of the stars. 0:26 Instead of creating the slide movement by animating the star's position, margin, 0:31 or padding. 0:35 I used a transform with the translate 3D function in each key frame. 0:36 The second value in the translate3d function is what translates or 0:43 moves the element on the y axis. 0:47 Now translate3d is a hardware-accelerated function. 0:50 This makes the animation play a whole lot smoother in the browser. 0:53 You can read more about hardware acceleration in the Teachers Notes. 0:57 So next, the grow animation is very similar to the one we created earlier for 1:01 the badge animation. 1:06 I'm using the rotate and scale transform functions. 1:08 To create that pulsing effect in the stars. 1:12 I'm also animating the elements opacity to one and fill color to yellow here at 50%. 1:15 Right below this rule, the offset animation 1:22 animates the circle element's stroke-offset property to zero. 1:25 Just like we did earlier with the Treehouse logo. 1:30 It also animates the stroke opacity to one in the 60% key frame. 1:33 So I didn't need to create seven different keyframe rules 1:39 to make this animation work. 1:43 Like we did earlier, 1:45 I'd used animation delay values to create the different animation start times. 1:46 So in my SVG styles, I'm setting transform-origin to center, 1:52 because all my transforms need to scale and rotate from their center. 1:57 And I figured out that the total length of this circle shape is 815 pixels. 2:02 So, to create the final line animation. 2:08 I set stroke-array and stroke-offset to 815. 2:11 Then called that offset key frame animation here in the animation property. 2:15 So right below in the star rule. 2:22 I gave the star elements a translate 3D of 180 pixels on the y axis. 2:25 This is how they're able to slide up from the bottom of the circle. 2:31 And then I call the slide and grow animations with the animation property. 2:37 So like we did earlier in the badge animation. 2:42 I staggered the star animations by giving each element an animation delay, 2:44 using an nth-of-type selector. 2:50 And that's pretty much it. 2:54 Now you probably did things a little bit differently, and 2:56 that's okay since there's no 100% right way of doing this. 2:59 It's just the method I used. 3:02 So keep up the good work. 3:04 And if you want, 3:06 you can share your new animation sequence with other students on our forum. 3:06 As you learned throughout this course, SVG animations are fun and interesting. 3:14 As web designers, we should be excited about the current state and 3:19 future of SVG Animation, because it's an increasingly important part of web design. 3:22 The methods I covered should give you lots of new ideas for 3:27 using SVG animations in your project. 3:29 So to practice what you've learned in this course. 3:32 You can replace some of the graphics on your website with SVG, 3:34 then add simple animations. 3:37 Or try adding other transform functions like translate, and 3:40 skew to the animation sequence you created earlier. 3:43 Or you can use an existing SVG you like. 3:46 And bring it to life with a little animation. 3:49 You can even use the SVG graphics on the Treehouse website, like I did. 3:51 We're always here to help, so if you have any questions about SVG transitions, 3:55 transforms, animations, or anything else we covered in this course. 3:59 Feel free to reach out to the wonderful Tree House community on our forum. 4:02 Or you can get ahold of me on Twitter. 4:06 I'm @GilH. 4:07 Thanks everyone. 4:08
You need to sign up for Treehouse in order to download course files.Sign up