1
00:00:00,440 --> 00:00:01,860
So, how'd it go?

2
00:00:01,860 --> 00:00:06,590
I hope you were able to create an SVG
animation sequence similar to this.

3
00:00:06,590 --> 00:00:10,260
Even if you created some parts of
the animation sequence, that's great.

4
00:00:10,260 --> 00:00:13,950
So now I'm gonna show you
one way of doing this.

5
00:00:13,950 --> 00:00:17,590
So in my style sheet,
I created three key frame rules and

6
00:00:17,590 --> 00:00:22,470
named the animation slide,
grow and off set.

7
00:00:22,470 --> 00:00:26,380
So the slide animation uses
three key frames to create

8
00:00:26,380 --> 00:00:28,920
that slide up motion of the stars.

9
00:00:31,200 --> 00:00:35,480
Instead of creating the slide movement by
animating the star's position, margin,

10
00:00:35,480 --> 00:00:36,740
or padding.

11
00:00:36,740 --> 00:00:41,800
I used a transform with the translate
3D function in each key frame.

12
00:00:43,080 --> 00:00:47,400
The second value in the translate3d
function is what translates or

13
00:00:47,400 --> 00:00:50,030
moves the element on the y axis.

14
00:00:50,030 --> 00:00:53,410
Now translate3d is
a hardware-accelerated function.

15
00:00:53,410 --> 00:00:57,750
This makes the animation play
a whole lot smoother in the browser.

16
00:00:57,750 --> 00:01:00,690
You can read more about hardware
acceleration in the Teachers Notes.

17
00:01:01,910 --> 00:01:06,670
So next, the grow animation is very
similar to the one we created earlier for

18
00:01:06,670 --> 00:01:08,250
the badge animation.

19
00:01:08,250 --> 00:01:12,290
I'm using the rotate and
scale transform functions.

20
00:01:12,290 --> 00:01:15,930
To create that pulsing
effect in the stars.

21
00:01:15,930 --> 00:01:22,830
I'm also animating the elements opacity to
one and fill color to yellow here at 50%.

22
00:01:22,830 --> 00:01:25,810
Right below this rule,
the offset animation

23
00:01:25,810 --> 00:01:30,750
animates the circle element's
stroke-offset property to zero.

24
00:01:30,750 --> 00:01:33,380
Just like we did earlier
with the Treehouse logo.

25
00:01:33,380 --> 00:01:39,390
It also animates the stroke opacity
to one in the 60% key frame.

26
00:01:39,390 --> 00:01:43,070
So I didn't need to create
seven different keyframe rules

27
00:01:43,070 --> 00:01:45,470
to make this animation work.

28
00:01:45,470 --> 00:01:46,650
Like we did earlier,

29
00:01:46,650 --> 00:01:52,610
I'd used animation delay values to create
the different animation start times.

30
00:01:52,610 --> 00:01:57,860
So in my SVG styles,
I'm setting transform-origin to center,

31
00:01:57,860 --> 00:02:02,480
because all my transforms need to
scale and rotate from their center.

32
00:02:02,480 --> 00:02:08,420
And I figured out that the total length
of this circle shape is 815 pixels.

33
00:02:08,420 --> 00:02:11,100
So, to create the final line animation.

34
00:02:11,100 --> 00:02:15,160
I set stroke-array and
stroke-offset to 815.

35
00:02:15,160 --> 00:02:21,020
Then called that offset key frame
animation here in the animation property.

36
00:02:22,560 --> 00:02:25,090
So right below in the star rule.

37
00:02:25,090 --> 00:02:31,710
I gave the star elements a translate
3D of 180 pixels on the y axis.

38
00:02:31,710 --> 00:02:34,500
This is how they're able to slide
up from the bottom of the circle.

39
00:02:37,920 --> 00:02:42,130
And then I call the slide and grow
animations with the animation property.

40
00:02:42,130 --> 00:02:44,810
So like we did earlier
in the badge animation.

41
00:02:44,810 --> 00:02:50,380
I staggered the star animations by
giving each element an animation delay,

42
00:02:50,380 --> 00:02:52,200
using an nth-of-type selector.

43
00:02:54,720 --> 00:02:56,550
And that's pretty much it.

44
00:02:56,550 --> 00:02:59,180
Now you probably did things
a little bit differently, and

45
00:02:59,180 --> 00:03:02,790
that's okay since there's no
100% right way of doing this.

46
00:03:02,790 --> 00:03:04,570
It's just the method I used.

47
00:03:04,570 --> 00:03:06,050
So keep up the good work.

48
00:03:06,050 --> 00:03:06,899
And if you want,

49
00:03:06,899 --> 00:03:10,791
you can share your new animation sequence
with other students on our forum.

50
00:03:14,831 --> 00:03:19,060
As you learned throughout this course,
SVG animations are fun and interesting.

51
00:03:19,060 --> 00:03:22,010
As web designers, we should be
excited about the current state and

52
00:03:22,010 --> 00:03:27,170
future of SVG Animation, because it's an
increasingly important part of web design.

53
00:03:27,170 --> 00:03:29,720
The methods I covered should
give you lots of new ideas for

54
00:03:29,720 --> 00:03:32,450
using SVG animations in your project.

55
00:03:32,450 --> 00:03:34,950
So to practice what you've
learned in this course.

56
00:03:34,950 --> 00:03:37,750
You can replace some of the graphics
on your website with SVG,

57
00:03:37,750 --> 00:03:40,270
then add simple animations.

58
00:03:40,270 --> 00:03:43,450
Or try adding other transform
functions like translate, and

59
00:03:43,450 --> 00:03:46,880
skew to the animation
sequence you created earlier.

60
00:03:46,880 --> 00:03:49,300
Or you can use an existing SVG you like.

61
00:03:49,300 --> 00:03:51,190
And bring it to life
with a little animation.

62
00:03:51,190 --> 00:03:55,270
You can even use the SVG graphics on
the Treehouse website, like I did.

63
00:03:55,270 --> 00:03:59,125
We're always here to help, so if you have
any questions about SVG transitions,

64
00:03:59,125 --> 00:04:02,775
transforms, animations, or
anything else we covered in this course.

65
00:04:02,775 --> 00:04:06,325
Feel free to reach out to the wonderful
Tree House community on our forum.

66
00:04:06,325 --> 00:04:07,935
Or you can get ahold of me on Twitter.

67
00:04:07,935 --> 00:04:08,874
I'm @GilH.

68
00:04:08,874 --> 00:04:10,849
Thanks everyone.