Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Animating SVG with CSS!
You have completed Animating SVG with CSS!
Preview
In this video, you will learn how to use the stroke-dasharray and stroke-dashoffset properties to create line animations.
CORRECTION: Creating an Animated Line Drawing
- Add a stroke to the path
- Set
stroke-dasharrayequal to the path's total length - Set
stroke-dashoffsetthe same asstroke-dasharray - Animate
stroke-dashoffsetback to0
Getting a path's total length using JavaScript
For example:
const path = document.querySelector('.logo');
const length = path.getTotalLength();
Quick Reference
Animated Line Drawing Examples
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Alright, so let me show you how
to use the stroke dash array and
0:00
stroke dash offset properties
to create line animations.
0:03
So, back in my style sheet,
under the key frames comment flag,
0:08
I'm going to create a new key frames rule,
and I'll name the animation offset.
0:12
This animation will animate
the offset in a path stroke.
0:20
In this rule,
I'm only going to define one keyframe.
0:24
A keyframe at 100%.
0:27
At 100%, the stroke dash offset
value will be set to zero.
0:29
So, now,
to apply this animation to the logo,
0:39
I'll need to reference this offset
animation inside the logo rule.
0:41
So in my logo rule I'll
add an animation property.
0:46
And I'll call the offset animation.
0:50
I'll set the duration to five seconds and
0:54
I'll add a linear
animation timing function.
0:57
Now the linear timing function maintains
the same speed from start to end.
1:00
You can add a different
timing function if you want.
1:05
Then, I'm going to add
a fill mode of forwards.
1:08
And forwards instructs the browser to end
the animation on its final key frame.
1:11
It's best to use the forwards fill mode
when creating line animations so that when
1:17
the animation ends it won't reset back to
the start values and remove the stroke.
1:21
And I'm going to increase the logo
stroke dash offset value to 150.
1:27
So it's going to animate the offset
from 150 pixels to zero,
1:32
creating more movement.
1:37
All right, so
let's have a look at the animation.
1:38
Once I save the style sheet and refresh
the browser, we can see how the dashes
1:41
gaps in the stroke animate from
a 150 pixel offset to zero.
1:47
So now we're seeing marching
ants around the tree house logo.
1:52
So now,
to create the line drawing animation,
1:58
I need to define a stroke dash array value
that's equal to the path's total length.
2:01
So, how do I get this path's total length?
2:07
Well, I need to test a few
values to figure this out.
2:10
So, back in my logo rule, I'm going to
comment out the stroke dash offset and
2:14
animation properties while
I figure out the value.
2:20
So first, I'm going to try
a stroke dash array value,
2:24
of 400, so let me save my style sheet and
refresh the page.
2:29
And as we can see it's not quite there.
2:33
It looks pretty neat but the stroke
only reveals a small part of the logo.
2:35
So, up next I'll go back and
try the value 650.
2:40
We're almost there, so
let me go back and try the value, 810.
2:46
Great!
2:51
Looks like that's it.
2:55
So after trying out a few values,
2:57
I figured out that the total length
of this path here is 810 pixels.
2:59
Now you can also use java script
to get the total length value,
3:05
instead of manually
figuring it out with CSS,
3:09
and I've posted a link about
that in the teacher's notes.
3:11
So when I set stoke dash array to 810,
3:15
the dash and
gap in the stoke are both 810 pixels long.
3:19
So they're as long as the path itself.
3:24
So what your seeing here is an 810
pixel long dash in the stroke.
3:27
Now we can adjust the offset so
that the gap covers the entire path.
3:33
And this is how you first
hide the dash in the stroke.
3:38
I'll show you what I mean.
3:41
If I go back to my logo rule and
uncomment the stroke dash offset property,
3:42
and if I offset it by the same
value as stroke dash array, so
3:49
I'll change the value to 810.
3:53
Once I save my style sheet and refresh
the page, we no longer see the green
3:56
outline because, instead of the dash
we're now seeing the gap in the stroke.
4:01
So, now I'm all set to animate it.
4:06
If I go back to the logo rule and
uncomment the animation property,
4:09
this animation sequence will now move
the stroke offset from 810 to zero.
4:15
So, once I save my style sheet and
refresh the page,
4:21
it creates the illusion that
the line is drawing logo.
4:24
Really neat.
4:28
So, what we're actually
seeing is the 810 pixel gap
4:29
being offset by the 810 pixel green dash.
4:33
So, as a nice finishing touch I
want to animate the path's green
4:38
fill color back in after
the line animation ends.
4:43
So, back in my style sheet, up here in
my key frames, I'm going to create a new
4:46
key frames rule and
I'll name these animation fill-it.
4:52
In the key frame rule,
I'll set one key frame at 100% and
4:57
I'm going to add a fill property and
set the fill value to
5:03
#6fbc6d, which renders
that light shade of green.
5:07
Then back in my logo rule, I'm going
to reference the fill-it animation,
5:16
so I'll add a comma after the properties
for the offset animation.
5:22
And I'll call fill-it and I'll set
the duration to point eight seconds.
5:28
So, to start this fill-it animation
right after the line drawing animation,
5:36
I'm going to set the animation
delay value to five seconds.
5:41
And then I'll give it an animation
fill mode of forwards.
5:46
I'll save my style sheet, and
when I go back to the preview and
5:50
refresh, we see the line drawing
animation, then after five seconds,
5:53
the logo's fill color fades in.
5:58
Beautiful!
6:00
So, in summary, the main steps for
6:02
creating an animated line drawing are,
first, add a stroke to the path.
6:04
Then set the stroke dash array value
equal to the path's total length and
6:09
set the stroke dash offset value
the same as stroke dash array.
6:15
Then animate stroke dash
array back to zero.
6:19
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up