"Python Collections (2016, retired 2019)" was retired on January 6, 2020.
Heads up! To view this whole video, sign in with your Treehouse account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Treehouse Festival June 2021!
You have completed Treehouse Festival June 2021!
Preview
Interactive Web Animation with SVG with Cassie Evans
18:45 with TreehouseIn this workshop Creative Developer Cassie Evans covers everything you need to know to get started with and master SVG animation.
This video doesn't have any notes.
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
[MUSIC]
0:00
Next up,
I'd like to introduce Cassie Evans.
0:07
Cassie is an international speaker and
0:11
creative developer with a background
in graphic design and motion design.
0:14
She got started with coding back in
the days of Myspace and Neopets, amazing.
0:19
And is on a mission to make
the web more whimsical again.
0:25
She's a massive SVG nerd.
0:28
Owner of the world's most clicky keyboard.
0:30
And the lead bestower of animation
superpowers at GreenSock.
0:33
Everyone, please welcome Cassie.
0:37
>> Hi folks.
[LAUGH] That was a little bit of a rocky
0:41
start.
0:45
But I am super happy to be here
remotely hanging out with all of you.
0:45
So I guess the polite way to
start is an introduction.
0:52
So I'm Cassie.
0:57
And as my website says, I like making
fun interactive stuff with code.
0:59
I've also recently just joined
the team at GreenSock as the lead
1:06
bestower of animation superpowers.
1:11
So that's a real job title, by the way.
1:14
So today I'm going to be pursuing lots
of animation superpowers on all of you.
1:18
And today we're going to be talking about
interactive web animation using SVG.
1:23
So let's start with the main question.
1:32
What is SVG?
1:36
A lot of the clue is in the name.
1:40
So SVG stands for Scalable Vector Graphic.
1:42
You can create SVGs and graphics programs
like illustrator or Affinity Designer.
1:47
And it's an image format that's scalable,
because it uses maths to plot and
1:52
connect points rather than
being made up out of pixels.
1:58
So you can make SVGs really, really tiny,
2:01
or really massive without affecting
the resolution or file size.
2:04
The SVG isn't just an image format.
2:12
Under the hood it's
also a markup language.
2:16
So after you get past the initial
confusion of all of the 1s and 0s,
2:19
it starts looking quite familiar,
kind of HTML.
2:23
It's got angle brackets and
nested tags just like HTML does.
2:27
In fact, it's a lot like HTML.
2:34
So I really love how my
friends Richard explains SVG.
2:36
He says the SVG is an alternate
universe version of
2:41
HTML focused on graphics
instead of documents.
2:45
And just like HTML SVG has a DOM.
2:53
So unlike other image formats like JPEGs,
or PNGs,
2:57
we can actually interact with
elements that are inside an SVG.
3:01
And then style them and
move them around to make animations.
3:05
So SVG graphics are basically
illustrations that you can
3:12
manipulate with code.
3:16
And the most exciting thing about
animating with code is that you can
3:18
make your animations interactive.
3:23
So you can use codes to
respond to user inputs,
3:29
like scrolling or mouse interactions,
or even the webcam.
3:33
So in this demo, I'm getting
the colors from the webcam feed.
3:44
And then I'm updating some CSS variables
to change the chameleon's color.
3:51
So right now it's gone my skin color.
3:56
But we can change that by
putting an orange poster
3:58
in front of the webcam like that.
4:03
Or what else have we got here?
4:06
I've got my fobby.
4:10
We could put a little fobby
in front of the webcam.
4:11
And it should pick up that purple.
4:16
So this is the most exciting thing for
me about SVG.
4:21
Is the fact that they're animations and
4:25
illustrations that you
can play with with code.
4:27
And you can use that code to respond
to inputs that you have on the web.
4:30
It's just very exciting.
4:36
It opens up this huge world of
possibilities and creativity.
4:37
You can also mix up SVG elements
with semantic DOM elements.
4:53
Like buttons and forms to add some whimsy
to otherwise lightly mundane interactions.
4:57
So this is a over the top example,
obviously.
5:04
But this was actually live on
the CSS tricks site for a while.
5:07
This was made by Adam Kuhn.
5:11
So shout out to him for
this amazing submarine button.
5:13
And because SVG has a DOM,
you can also make it nice and accessible.
5:23
So if this is my logo
animation from my sites.
5:31
But the text isn't really text,
it's just SVG outlines and parts.
5:35
But it has a title element.
5:40
We can see that here.
5:44
That's being referenced
by aria-labelledby.
5:45
And because of that screen readers,
we'll read this out like normal text.
5:49
So this makes SVG really good for
logos and animated text.
5:54
Because you could make animated
text that's accessible.
5:59
And you can also use SVG for database.
6:09
I know I'm gonna sound
like a stuck record here.
6:12
But because database often has text and
information in,
6:14
you can easily make this
accessible to screen readers.
6:18
Because SVGs can have real text inside.
6:22
They've got a DOM that you
can put Aria labels on.
6:25
And the other benefit is it will fall back
to a static image without JavaScript.
6:28
Whereas if you were doing database in
Canvas or Web GL without JavaScript,
6:33
you wouldn't get anything.
6:37
And also cuz SVG, you've got this
whole illustrative side of it,
6:44
you can get really creative with database.
6:48
So I hooked into some solar panels at my
last workplace for this little database.
6:51
And I'm displaying how much
CO2 we've saved by growing
6:57
this little virtual garden.
7:02
And now, this is all really fun and
people get inspired by this kind of thing.
7:04
But there's always a few
people that come to my talks.
7:11
And they're like, yeah, but
I can't use this thing client sites.
7:13
You can't always go super
big on client sites and
7:17
add loads of like chameleons and
animated trees on everything.
7:20
And that's understandable.
7:25
But SVG is really good at being small too.
7:27
Remember when I was talking
about scalable vector graphics.
7:31
So SVG is really great for delightful,
little micro interactions.
7:35
And icons are really great candidates for
when you're learning how to animate.
7:41
Because it's quite a challenge to
work out how to use a small space and
7:46
a couple of elements to convey
an action successfully.
7:50
And it can be really satisfying
when you get it right.
7:54
You can pack quite a lot
of fun into a small area.
7:58
So how do we do this?
8:05
Where do we get started?
8:08
So this is another great thing about SVG.
8:10
The barrier to entry is a little bit
lower than, say, canvas or Web GL.
8:14
SVG markup is very similar to HTML.
8:20
So if you know a little bit of HTML, and
8:23
if you know a little bit of CSS,
you can do SVG animation.
8:26
So CSS animation is a really great
place to start experimenting.
8:35
You don't need to add any libraries.
8:41
The syntax is nice and declarative, and
8:43
you can reuse keyframes
on multiple elements.
8:45
I'll replay this slide again.
8:49
But this animation here,
you can see that it's going to fade out
8:51
the square from opacity 1 to
opacity 0 over two seconds.
8:55
That's a nice simple
example of CSS animation.
9:03
For production, though,
CSS animation can sometimes be
9:09
a little bit of a nightmare
with SVG in particular.
9:14
Especially with transforms.
9:19
So your animations can end up
looking different depending on how
9:21
the browser interprets your transforms.
9:25
And the issue here is down to how
transform origin is implemented in SVG.
9:28
So if you spin around a DOM element,
it will spin around from its center.
9:34
So if I get a poster note,
9:40
you can kind of imagine that
there's a pin right in the center.
9:41
And it would spin around like that.
9:45
So DOM elements are measured
from the center.
9:48
Whereas with SVG they measure transform
origin from that on top left corner.
9:51
And in some browsers
transforms are measured from
9:58
the SVG Canvas' top left corner.
10:02
So there's a relatively new CSS
property called transform-box.
10:08
And this looks really
promising to fix this issue.
10:13
In fact, I think that we might
have Internet Explorer now.
10:16
I think this might be an outdated graphic.
10:20
So I think we have Internet Explorer.
10:23
Transform-box basically defines
the layout box that the transform and
10:27
transform origin properties relate to.
10:33
So if the transform-box property
is specified as fill box,
10:36
the elements bounding box is
used as the reference box.
10:42
So the center of rotation would
be the top left corner here.
10:47
And if we're ready to set
the property to view-box,
10:53
the nearest SVG view-put is
used as the reference box.
10:57
So the center of rotation would
be the SVG's top left corner.
11:01
So I usually say to people,
if you want to use CSS animation and SVG,
11:10
you can use feature queries to check
if the browser supports transform-box.
11:15
And then pop your animation code in there.
11:21
And this is good.
11:24
This is kind of progressive enhancement.
11:25
If the browser doesn't
support transform-box,
11:28
then you won't get animation, but
then you won't get broken animation.
11:30
And no animation is better
than broken animation.
11:34
So that's kind of how I would
recommend handling CSS animations and
11:38
SVG in production.
11:44
But CSS can also be quite unwieldy for
complex animations.
11:45
As you don't have the ability
to structure timelines or
11:50
stagger animations one after another.
11:54
So you have to kind of manually add
delays in order to sequence animations
11:59
one after another.
12:04
And I'm sure a lot of you
have already tried this and
12:06
you've discovered that it's
quite a lot of hard work.
12:09
Especially is,
if you want to change something small or
12:13
speed up the whole sequence or
play something in reverse,
12:17
you have to end up rewriting
all of the timings.
12:21
And this is where animation
libraries like GreenSock shine.
12:25
So adaptability, sequencing, and
12:29
the ability to control every
part of your animation.
12:32
So there's a lot of libraries
out there for web animation.
12:39
But GreenSock is the only one that
handles SVG transforms cross browser.
12:44
And that's an incredibly
important thing for SVG animation.
12:51
So the last time I did this talk was
actually before I worked for GreenSock.
12:58
So this is doubly exciting for me now.
13:03
So GreenSock's been around
since the days of flash.
13:07
And the forums and
community are really, really supportive.
13:11
So all the core features of GreenSock
definitely warrant their own talk, but
13:19
we don't have time for that.
13:24
So we're just gonna focus on
the need to knows the now.
13:26
We're gonna be animating a little Neopets.
13:30
So bonus points to anyone
that remembers them.
13:32
So before getting started, you'll need to
add the GreenSock library to your project.
13:39
So on code pen we do that
with this little panel.
13:45
But you can use NPM or Yarn or
CDN links in a production project.
13:48
So once you've got that sorted,
you're ready to start tweening.
13:53
So what's tweening?
14:00
Just pretending someone's
asked that question.
14:02
It's a very good question and
I'm very glad you asked.
14:04
So tweening is short for inbetweening.
14:07
So a tween is the name for
a single movement in animation.
14:10
This could be a movement in
space from point A to point B.
14:16
Or it could be in state,
from one color to another.
14:22
And the ease that you choose is
what determines the timing and
14:30
the spacing of the in between frames.
14:34
So things in the real world don't
just move consistently from A to B,
14:36
unless they're in space and
don't have gravity to contend with.
14:40
So easing is what brings your animation
to life and gives it personality.
14:44
GreenSock provides a whole load more
easing equations than we get with CSS and
14:52
Cubic Bezier.
14:57
So we can make much more interesting and
realistic animations.
14:58
You can see there's a little
bounce animation here.
15:06
And you can also create your
own custom eases as well.
15:10
And this means that you
write less animation code,
15:13
because you can get the ease to do
a lot of the hard work for you.
15:16
So, with GreenSock,
a tween looks like this.
15:24
There's a whole bunch of different
GreenSock methods, but the majority of
15:27
the time you'll be choosing whether
to animate to or from some values.
15:31
You'll choose what you want to animate.
15:37
This can be a CSS selector or a reference
to an element or multiple elements.
15:39
You choose how long do
you want to animate for.
15:45
And then what values you want to change.
15:48
So you can create individual
tweens like this.
15:53
Or you can take these tweens and you can
sequence them together on a timeline.
15:57
And timelines,
kind of act like a container that you
16:07
can put tweens or other timelines into.
16:12
And then those timelines help you
keep your tweens organized, and
16:15
give you more precise
control over the animation.
16:20
So GreenSock even have dev tools.
16:24
So you can debug your animations with
a little scrubber, which is super cool.
16:26
Timelines also have a bunch of different
methods that you can call if you want to
16:38
speed the whole sequence up.
16:41
Or if you wanna reverse it,
or play it, or pause it.
16:43
So this gives you a lot of control
over interactions and inputs.
16:45
And user inputs on the web.
16:49
So if you're excited and you want to
have a play around, we've got loads and
16:55
loads of starter pens on CodePen.
17:00
And the best way to learn
is by experimenting.
17:02
I learned by just forking things that I
found on CodePen and having a play around.
17:05
And there's a whole bunch of plugins
that are specifically for SVG too.
17:13
So this is DrawSVG,
it allows you to show and hide SVG paths.
17:17
And this is the kind of thing that
you can achieve with DrawSVG.
17:26
There's also MorphSVG.
17:33
And MorphSVG makes morphing between
different SVG paths a lot easier.
17:35
If you've ever tried morphing
without using some sort of helper,
17:41
it's incredibly difficult.
17:45
There's a lot of maths involved,
17:46
especially when paths don't
have the same number of points.
17:48
So there's a whole load of fun stuff
that GreenSock has to play around with,
17:52
if you want to explore with SVG animation.
17:57
So the last thing that I'll leave
you with is the fact that for
18:04
people with vestibular disorders,
animation can make them feel queasy.
18:08
So with great power comes
great responsibility.
18:13
We can use the proposed
reduced motion media query.
18:16
And we can use that to check to see
if a user has a preference set for
18:20
reduced motion.
18:24
And then we can adjust our
animations accordingly.
18:25
So you can do this in CSS or JavaScript
to adjust the experience for people.
18:28
So thank you for listening.
18:38
I'm sorry about the rocky start.
18:39
And I hope to see you in
the GreenSock forum soon.
18:41
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