1
00:00:00,310 --> 00:00:03,790
Alright, so let me show you how
to use the stroke dash array and

2
00:00:03,790 --> 00:00:08,050
stroke dash offset properties
to create line animations.

3
00:00:08,050 --> 00:00:12,180
So, back in my style sheet,
under the key frames comment flag,

4
00:00:12,180 --> 00:00:20,180
I'm going to create a new key frames rule,
and I'll name the animation offset.

5
00:00:20,180 --> 00:00:24,450
This animation will animate
the offset in a path stroke.

6
00:00:24,450 --> 00:00:27,610
In this rule,
I'm only going to define one keyframe.

7
00:00:27,610 --> 00:00:29,632
A keyframe at 100%.

8
00:00:29,632 --> 00:00:35,820
At 100%, the stroke dash offset
value will be set to zero.

9
00:00:39,360 --> 00:00:41,630
So, now,
to apply this animation to the logo,

10
00:00:41,630 --> 00:00:46,870
I'll need to reference this offset
animation inside the logo rule.

11
00:00:46,870 --> 00:00:50,780
So in my logo rule I'll
add an animation property.

12
00:00:50,780 --> 00:00:54,230
And I'll call the offset animation.

13
00:00:54,230 --> 00:00:57,530
I'll set the duration to five seconds and

14
00:00:57,530 --> 00:01:00,410
I'll add a linear
animation timing function.

15
00:01:00,410 --> 00:01:05,530
Now the linear timing function maintains
the same speed from start to end.

16
00:01:05,530 --> 00:01:08,390
You can add a different
timing function if you want.

17
00:01:08,390 --> 00:01:11,600
Then, I'm going to add
a fill mode of forwards.

18
00:01:11,600 --> 00:01:17,060
And forwards instructs the browser to end
the animation on its final key frame.

19
00:01:17,060 --> 00:01:21,970
It's best to use the forwards fill mode
when creating line animations so that when

20
00:01:21,970 --> 00:01:27,590
the animation ends it won't reset back to
the start values and remove the stroke.

21
00:01:27,590 --> 00:01:32,610
And I'm going to increase the logo
stroke dash offset value to 150.

22
00:01:32,610 --> 00:01:37,820
So it's going to animate the offset
from 150 pixels to zero,

23
00:01:37,820 --> 00:01:38,870
creating more movement.

24
00:01:38,870 --> 00:01:41,810
All right, so
let's have a look at the animation.

25
00:01:41,810 --> 00:01:47,150
Once I save the style sheet and refresh
the browser, we can see how the dashes

26
00:01:47,150 --> 00:01:52,270
gaps in the stroke animate from
a 150 pixel offset to zero.

27
00:01:52,270 --> 00:01:55,210
So now we're seeing marching
ants around the tree house logo.

28
00:01:58,110 --> 00:02:01,750
So now,
to create the line drawing animation,

29
00:02:01,750 --> 00:02:07,910
I need to define a stroke dash array value
that's equal to the path's total length.

30
00:02:07,910 --> 00:02:10,510
So, how do I get this path's total length?

31
00:02:10,510 --> 00:02:14,190
Well, I need to test a few
values to figure this out.

32
00:02:14,190 --> 00:02:20,360
So, back in my logo rule, I'm going to
comment out the stroke dash offset and

33
00:02:20,360 --> 00:02:24,240
animation properties while
I figure out the value.

34
00:02:24,240 --> 00:02:29,240
So first, I'm going to try
a stroke dash array value,

35
00:02:29,240 --> 00:02:33,820
of 400, so let me save my style sheet and
refresh the page.

36
00:02:33,820 --> 00:02:35,630
And as we can see it's not quite there.

37
00:02:35,630 --> 00:02:40,070
It looks pretty neat but the stroke
only reveals a small part of the logo.

38
00:02:40,070 --> 00:02:46,650
So, up next I'll go back and
try the value 650.

39
00:02:46,650 --> 00:02:51,080
We're almost there, so
let me go back and try the value, 810.

40
00:02:51,080 --> 00:02:51,580
Great!

41
00:02:55,840 --> 00:02:57,410
Looks like that's it.

42
00:02:57,410 --> 00:02:59,390
So after trying out a few values,

43
00:02:59,390 --> 00:03:05,800
I figured out that the total length
of this path here is 810 pixels.

44
00:03:05,800 --> 00:03:09,590
Now you can also use java script
to get the total length value,

45
00:03:09,590 --> 00:03:11,630
instead of manually
figuring it out with CSS,

46
00:03:11,630 --> 00:03:15,780
and I've posted a link about
that in the teacher's notes.

47
00:03:15,780 --> 00:03:19,620
So when I set stoke dash array to 810,

48
00:03:19,620 --> 00:03:24,930
the dash and
gap in the stoke are both 810 pixels long.

49
00:03:24,930 --> 00:03:27,420
So they're as long as the path itself.

50
00:03:27,420 --> 00:03:33,810
So what your seeing here is an 810
pixel long dash in the stroke.

51
00:03:33,810 --> 00:03:38,530
Now we can adjust the offset so
that the gap covers the entire path.

52
00:03:38,530 --> 00:03:41,290
And this is how you first
hide the dash in the stroke.

53
00:03:41,290 --> 00:03:42,960
I'll show you what I mean.

54
00:03:42,960 --> 00:03:49,170
If I go back to my logo rule and
uncomment the stroke dash offset property,

55
00:03:49,170 --> 00:03:53,510
and if I offset it by the same
value as stroke dash array, so

56
00:03:53,510 --> 00:03:56,750
I'll change the value to 810.

57
00:03:56,750 --> 00:04:01,880
Once I save my style sheet and refresh
the page, we no longer see the green

58
00:04:01,880 --> 00:04:06,880
outline because, instead of the dash
we're now seeing the gap in the stroke.

59
00:04:06,880 --> 00:04:09,060
So, now I'm all set to animate it.

60
00:04:09,060 --> 00:04:13,920
If I go back to the logo rule and
uncomment the animation property,

61
00:04:15,500 --> 00:04:21,280
this animation sequence will now move
the stroke offset from 810 to zero.

62
00:04:21,280 --> 00:04:24,160
So, once I save my style sheet and
refresh the page,

63
00:04:24,160 --> 00:04:28,000
it creates the illusion that
the line is drawing logo.

64
00:04:28,000 --> 00:04:29,080
Really neat.

65
00:04:29,080 --> 00:04:33,620
So, what we're actually
seeing is the 810 pixel gap

66
00:04:33,620 --> 00:04:37,390
being offset by the 810 pixel green dash.

67
00:04:38,770 --> 00:04:43,040
So, as a nice finishing touch I
want to animate the path's green

68
00:04:43,040 --> 00:04:46,140
fill color back in after
the line animation ends.

69
00:04:46,140 --> 00:04:52,040
So, back in my style sheet, up here in
my key frames, I'm going to create a new

70
00:04:52,040 --> 00:04:57,960
key frames rule and
I'll name these animation fill-it.

71
00:04:57,960 --> 00:05:03,200
In the key frame rule,
I'll set one key frame at 100% and

72
00:05:03,200 --> 00:05:07,515
I'm going to add a fill property and
set the fill value to

73
00:05:07,515 --> 00:05:16,410
#6fbc6d, which renders
that light shade of green.

74
00:05:16,410 --> 00:05:22,900
Then back in my logo rule, I'm going
to reference the fill-it animation,

75
00:05:22,900 --> 00:05:27,490
so I'll add a comma after the properties
for the offset animation.

76
00:05:28,540 --> 00:05:34,830
And I'll call fill-it and I'll set
the duration to point eight seconds.

77
00:05:36,020 --> 00:05:41,460
So, to start this fill-it animation
right after the line drawing animation,

78
00:05:41,460 --> 00:05:45,360
I'm going to set the animation
delay value to five seconds.

79
00:05:46,680 --> 00:05:50,480
And then I'll give it an animation
fill mode of forwards.

80
00:05:50,480 --> 00:05:53,360
I'll save my style sheet, and
when I go back to the preview and

81
00:05:53,360 --> 00:05:58,640
refresh, we see the line drawing
animation, then after five seconds,

82
00:05:58,640 --> 00:06:00,810
the logo's fill color fades in.

83
00:06:00,810 --> 00:06:02,330
Beautiful!

84
00:06:02,330 --> 00:06:04,400
So, in summary, the main steps for

85
00:06:04,400 --> 00:06:09,950
creating an animated line drawing are,
first, add a stroke to the path.

86
00:06:09,950 --> 00:06:15,277
Then set the stroke dash array value
equal to the path's total length and

87
00:06:15,277 --> 00:06:19,920
set the stroke dash offset value
the same as stroke dash array.

88
00:06:19,920 --> 00:06:22,327
Then animate stroke dash
array back to zero.