Preview
Video Player
00:00
00:00
The Animation Challenge Solution
4:10This 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