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.