1
00:00:00,000 --> 00:00:07,311
[MUSIC]

2
00:00:07,311 --> 00:00:11,593
Next up,
I'd like to introduce Cassie Evans.

3
00:00:11,593 --> 00:00:14,350
Cassie is an international speaker and

4
00:00:14,350 --> 00:00:19,706
creative developer with a background
in graphic design and motion design.

5
00:00:19,706 --> 00:00:25,537
She got started with coding back in
the days of Myspace and Neopets, amazing.

6
00:00:25,537 --> 00:00:28,426
And is on a mission to make
the web more whimsical again.

7
00:00:28,426 --> 00:00:30,815
She's a massive SVG nerd.

8
00:00:30,815 --> 00:00:33,666
Owner of the world's most clicky keyboard.

9
00:00:33,666 --> 00:00:37,498
And the lead bestower of animation
superpowers at GreenSock.

10
00:00:37,498 --> 00:00:39,387
Everyone, please welcome Cassie.

11
00:00:41,564 --> 00:00:45,112
>> Hi folks.
[LAUGH] That was a little bit of a rocky

12
00:00:45,112 --> 00:00:45,857
start.

13
00:00:45,857 --> 00:00:50,756
But I am super happy to be here
remotely hanging out with all of you.

14
00:00:52,747 --> 00:00:57,800
So I guess the polite way to
start is an introduction.

15
00:00:57,800 --> 00:00:59,781
So I'm Cassie.

16
00:00:59,781 --> 00:01:06,915
And as my website says, I like making
fun interactive stuff with code.

17
00:01:06,915 --> 00:01:11,563
I've also recently just joined
the team at GreenSock as the lead

18
00:01:11,563 --> 00:01:14,330
bestower of animation superpowers.

19
00:01:14,330 --> 00:01:18,174
So that's a real job title, by the way.

20
00:01:18,174 --> 00:01:23,221
So today I'm going to be pursuing lots
of animation superpowers on all of you.

21
00:01:23,221 --> 00:01:29,429
And today we're going to be talking about
interactive web animation using SVG.

22
00:01:32,777 --> 00:01:36,691
So let's start with the main question.

23
00:01:36,691 --> 00:01:38,152
What is SVG?

24
00:01:40,653 --> 00:01:42,756
A lot of the clue is in the name.

25
00:01:42,756 --> 00:01:47,028
So SVG stands for Scalable Vector Graphic.

26
00:01:47,028 --> 00:01:52,916
You can create SVGs and graphics programs
like illustrator or Affinity Designer.

27
00:01:52,916 --> 00:01:58,166
And it's an image format that's scalable,
because it uses maths to plot and

28
00:01:58,166 --> 00:02:01,978
connect points rather than
being made up out of pixels.

29
00:02:01,978 --> 00:02:04,956
So you can make SVGs really, really tiny,

30
00:02:04,956 --> 00:02:09,603
or really massive without affecting
the resolution or file size.

31
00:02:12,740 --> 00:02:16,183
The SVG isn't just an image format.

32
00:02:16,183 --> 00:02:19,041
Under the hood it's
also a markup language.

33
00:02:19,041 --> 00:02:23,868
So after you get past the initial
confusion of all of the 1s and 0s,

34
00:02:23,868 --> 00:02:27,437
it starts looking quite familiar,
kind of HTML.

35
00:02:27,437 --> 00:02:31,892
It's got angle brackets and
nested tags just like HTML does.

36
00:02:34,224 --> 00:02:36,966
In fact, it's a lot like HTML.

37
00:02:36,966 --> 00:02:41,324
So I really love how my
friends Richard explains SVG.

38
00:02:41,324 --> 00:02:45,848
He says the SVG is an alternate
universe version of

39
00:02:45,848 --> 00:02:50,277
HTML focused on graphics
instead of documents.

40
00:02:53,227 --> 00:02:57,562
And just like HTML SVG has a DOM.

41
00:02:57,562 --> 00:03:01,303
So unlike other image formats like JPEGs,
or PNGs,

42
00:03:01,303 --> 00:03:05,823
we can actually interact with
elements that are inside an SVG.

43
00:03:05,823 --> 00:03:09,696
And then style them and
move them around to make animations.

44
00:03:12,505 --> 00:03:16,846
So SVG graphics are basically
illustrations that you can

45
00:03:16,846 --> 00:03:18,659
manipulate with code.

46
00:03:18,659 --> 00:03:23,164
And the most exciting thing about
animating with code is that you can

47
00:03:23,164 --> 00:03:25,622
make your animations interactive.

48
00:03:29,823 --> 00:03:33,907
So you can use codes to
respond to user inputs,

49
00:03:33,907 --> 00:03:39,271
like scrolling or mouse interactions,
or even the webcam.

50
00:03:44,711 --> 00:03:51,812
So in this demo, I'm getting
the colors from the webcam feed.

51
00:03:51,812 --> 00:03:56,852
And then I'm updating some CSS variables
to change the chameleon's color.

52
00:03:56,852 --> 00:03:58,625
So right now it's gone my skin color.

53
00:03:58,625 --> 00:04:03,545
But we can change that by
putting an orange poster

54
00:04:03,545 --> 00:04:06,909
in front of the webcam like that.

55
00:04:06,909 --> 00:04:10,414
Or what else have we got here?

56
00:04:10,414 --> 00:04:11,813
I've got my fobby.

57
00:04:11,813 --> 00:04:16,556
We could put a little fobby
in front of the webcam.

58
00:04:16,556 --> 00:04:18,138
And it should pick up that purple.

59
00:04:21,384 --> 00:04:25,290
So this is the most exciting thing for
me about SVG.

60
00:04:25,290 --> 00:04:27,833
Is the fact that they're animations and

61
00:04:27,833 --> 00:04:30,910
illustrations that you
can play with with code.

62
00:04:30,910 --> 00:04:36,227
And you can use that code to respond
to inputs that you have on the web.

63
00:04:36,227 --> 00:04:37,460
It's just very exciting.

64
00:04:37,460 --> 00:04:41,491
It opens up this huge world of
possibilities and creativity.

65
00:04:53,041 --> 00:04:57,962
You can also mix up SVG elements
with semantic DOM elements.

66
00:04:57,962 --> 00:05:04,787
Like buttons and forms to add some whimsy
to otherwise lightly mundane interactions.

67
00:05:04,787 --> 00:05:07,489
So this is a over the top example,
obviously.

68
00:05:07,489 --> 00:05:11,651
But this was actually live on
the CSS tricks site for a while.

69
00:05:11,651 --> 00:05:13,296
This was made by Adam Kuhn.

70
00:05:13,296 --> 00:05:16,628
So shout out to him for
this amazing submarine button.

71
00:05:23,805 --> 00:05:31,051
And because SVG has a DOM,
you can also make it nice and accessible.

72
00:05:31,051 --> 00:05:35,044
So if this is my logo
animation from my sites.

73
00:05:35,044 --> 00:05:40,156
But the text isn't really text,
it's just SVG outlines and parts.

74
00:05:40,156 --> 00:05:44,032
But it has a title element.

75
00:05:44,032 --> 00:05:45,958
We can see that here.

76
00:05:45,958 --> 00:05:49,590
That's being referenced
by aria-labelledby.

77
00:05:49,590 --> 00:05:54,255
And because of that screen readers,
we'll read this out like normal text.

78
00:05:54,255 --> 00:05:59,606
So this makes SVG really good for
logos and animated text.

79
00:05:59,606 --> 00:06:03,222
Because you could make animated
text that's accessible.

80
00:06:09,053 --> 00:06:12,185
And you can also use SVG for database.

81
00:06:12,185 --> 00:06:14,973
I know I'm gonna sound
like a stuck record here.

82
00:06:14,973 --> 00:06:18,743
But because database often has text and
information in,

83
00:06:18,743 --> 00:06:22,445
you can easily make this
accessible to screen readers.

84
00:06:22,445 --> 00:06:25,590
Because SVGs can have real text inside.

85
00:06:25,590 --> 00:06:28,660
They've got a DOM that you
can put Aria labels on.

86
00:06:28,660 --> 00:06:33,599
And the other benefit is it will fall back
to a static image without JavaScript.

87
00:06:33,599 --> 00:06:37,320
Whereas if you were doing database in
Canvas or Web GL without JavaScript,

88
00:06:37,320 --> 00:06:38,805
you wouldn't get anything.

89
00:06:44,590 --> 00:06:48,568
And also cuz SVG, you've got this
whole illustrative side of it,

90
00:06:48,568 --> 00:06:51,207
you can get really creative with database.

91
00:06:51,207 --> 00:06:57,920
So I hooked into some solar panels at my
last workplace for this little database.

92
00:06:57,920 --> 00:07:02,099
And I'm displaying how much
CO2 we've saved by growing

93
00:07:02,099 --> 00:07:04,284
this little virtual garden.

94
00:07:04,284 --> 00:07:11,386
And now, this is all really fun and
people get inspired by this kind of thing.

95
00:07:11,386 --> 00:07:13,835
But there's always a few
people that come to my talks.

96
00:07:13,835 --> 00:07:17,176
And they're like, yeah, but
I can't use this thing client sites.

97
00:07:17,176 --> 00:07:20,959
You can't always go super
big on client sites and

98
00:07:20,959 --> 00:07:25,948
add loads of like chameleons and
animated trees on everything.

99
00:07:25,948 --> 00:07:27,284
And that's understandable.

100
00:07:27,284 --> 00:07:31,289
But SVG is really good at being small too.

101
00:07:31,289 --> 00:07:35,772
Remember when I was talking
about scalable vector graphics.

102
00:07:35,772 --> 00:07:41,158
So SVG is really great for delightful,
little micro interactions.

103
00:07:41,158 --> 00:07:46,150
And icons are really great candidates for
when you're learning how to animate.

104
00:07:46,150 --> 00:07:50,882
Because it's quite a challenge to
work out how to use a small space and

105
00:07:50,882 --> 00:07:54,728
a couple of elements to convey
an action successfully.

106
00:07:54,728 --> 00:07:58,244
And it can be really satisfying
when you get it right.

107
00:07:58,244 --> 00:08:01,225
You can pack quite a lot
of fun into a small area.

108
00:08:05,817 --> 00:08:08,446
So how do we do this?

109
00:08:08,446 --> 00:08:10,874
Where do we get started?

110
00:08:10,874 --> 00:08:14,453
So this is another great thing about SVG.

111
00:08:14,453 --> 00:08:20,757
The barrier to entry is a little bit
lower than, say, canvas or Web GL.

112
00:08:20,757 --> 00:08:23,656
SVG markup is very similar to HTML.

113
00:08:23,656 --> 00:08:26,365
So if you know a little bit of HTML, and

114
00:08:26,365 --> 00:08:30,451
if you know a little bit of CSS,
you can do SVG animation.

115
00:08:35,887 --> 00:08:41,600
So CSS animation is a really great
place to start experimenting.

116
00:08:41,600 --> 00:08:43,138
You don't need to add any libraries.

117
00:08:43,138 --> 00:08:45,903
The syntax is nice and declarative, and

118
00:08:45,903 --> 00:08:49,168
you can reuse keyframes
on multiple elements.

119
00:08:49,168 --> 00:08:51,040
I'll replay this slide again.

120
00:08:51,040 --> 00:08:55,738
But this animation here,
you can see that it's going to fade out

121
00:08:55,738 --> 00:09:00,009
the square from opacity 1 to
opacity 0 over two seconds.

122
00:09:03,311 --> 00:09:06,970
That's a nice simple
example of CSS animation.

123
00:09:09,923 --> 00:09:14,826
For production, though,
CSS animation can sometimes be

124
00:09:14,826 --> 00:09:19,134
a little bit of a nightmare
with SVG in particular.

125
00:09:19,134 --> 00:09:21,225
Especially with transforms.

126
00:09:21,225 --> 00:09:25,638
So your animations can end up
looking different depending on how

127
00:09:25,638 --> 00:09:28,590
the browser interprets your transforms.

128
00:09:28,590 --> 00:09:34,980
And the issue here is down to how
transform origin is implemented in SVG.

129
00:09:34,980 --> 00:09:40,150
So if you spin around a DOM element,
it will spin around from its center.

130
00:09:40,150 --> 00:09:41,725
So if I get a poster note,

131
00:09:41,725 --> 00:09:45,702
you can kind of imagine that
there's a pin right in the center.

132
00:09:45,702 --> 00:09:48,117
And it would spin around like that.

133
00:09:48,117 --> 00:09:51,399
So DOM elements are measured
from the center.

134
00:09:51,399 --> 00:09:58,685
Whereas with SVG they measure transform
origin from that on top left corner.

135
00:09:58,685 --> 00:10:02,785
And in some browsers
transforms are measured from

136
00:10:02,785 --> 00:10:05,622
the SVG Canvas' top left corner.

137
00:10:08,190 --> 00:10:13,550
So there's a relatively new CSS
property called transform-box.

138
00:10:13,550 --> 00:10:16,464
And this looks really
promising to fix this issue.

139
00:10:16,464 --> 00:10:20,130
In fact, I think that we might
have Internet Explorer now.

140
00:10:20,130 --> 00:10:23,870
I think this might be an outdated graphic.

141
00:10:23,870 --> 00:10:27,489
So I think we have Internet Explorer.

142
00:10:27,489 --> 00:10:33,146
Transform-box basically defines
the layout box that the transform and

143
00:10:33,146 --> 00:10:36,399
transform origin properties relate to.

144
00:10:36,399 --> 00:10:42,151
So if the transform-box property
is specified as fill box,

145
00:10:42,151 --> 00:10:47,472
the elements bounding box is
used as the reference box.

146
00:10:47,472 --> 00:10:51,184
So the center of rotation would
be the top left corner here.

147
00:10:53,699 --> 00:10:57,485
And if we're ready to set
the property to view-box,

148
00:10:57,485 --> 00:11:01,454
the nearest SVG view-put is
used as the reference box.

149
00:11:01,454 --> 00:11:05,682
So the center of rotation would
be the SVG's top left corner.

150
00:11:10,385 --> 00:11:15,666
So I usually say to people,
if you want to use CSS animation and SVG,

151
00:11:15,666 --> 00:11:21,798
you can use feature queries to check
if the browser supports transform-box.

152
00:11:21,798 --> 00:11:24,801
And then pop your animation code in there.

153
00:11:24,801 --> 00:11:25,870
And this is good.

154
00:11:25,870 --> 00:11:28,087
This is kind of progressive enhancement.

155
00:11:28,087 --> 00:11:30,515
If the browser doesn't
support transform-box,

156
00:11:30,515 --> 00:11:34,082
then you won't get animation, but
then you won't get broken animation.

157
00:11:34,082 --> 00:11:38,208
And no animation is better
than broken animation.

158
00:11:38,208 --> 00:11:44,163
So that's kind of how I would
recommend handling CSS animations and

159
00:11:44,163 --> 00:11:45,948
SVG in production.

160
00:11:45,948 --> 00:11:50,952
But CSS can also be quite unwieldy for
complex animations.

161
00:11:50,952 --> 00:11:54,718
As you don't have the ability
to structure timelines or

162
00:11:54,718 --> 00:11:57,450
stagger animations one after another.

163
00:11:59,420 --> 00:12:04,397
So you have to kind of manually add
delays in order to sequence animations

164
00:12:04,397 --> 00:12:06,460
one after another.

165
00:12:06,460 --> 00:12:09,772
And I'm sure a lot of you
have already tried this and

166
00:12:09,772 --> 00:12:13,404
you've discovered that it's
quite a lot of hard work.

167
00:12:13,404 --> 00:12:17,454
Especially is,
if you want to change something small or

168
00:12:17,454 --> 00:12:21,677
speed up the whole sequence or
play something in reverse,

169
00:12:21,677 --> 00:12:25,142
you have to end up rewriting
all of the timings.

170
00:12:25,142 --> 00:12:29,903
And this is where animation
libraries like GreenSock shine.

171
00:12:29,903 --> 00:12:32,515
So adaptability, sequencing, and

172
00:12:32,515 --> 00:12:36,316
the ability to control every
part of your animation.

173
00:12:39,587 --> 00:12:44,165
So there's a lot of libraries
out there for web animation.

174
00:12:44,165 --> 00:12:51,185
But GreenSock is the only one that
handles SVG transforms cross browser.

175
00:12:51,185 --> 00:12:55,286
And that's an incredibly
important thing for SVG animation.

176
00:12:58,174 --> 00:13:03,526
So the last time I did this talk was
actually before I worked for GreenSock.

177
00:13:03,526 --> 00:13:07,497
So this is doubly exciting for me now.

178
00:13:07,497 --> 00:13:11,442
So GreenSock's been around
since the days of flash.

179
00:13:11,442 --> 00:13:16,537
And the forums and
community are really, really supportive.

180
00:13:19,906 --> 00:13:24,815
So all the core features of GreenSock
definitely warrant their own talk, but

181
00:13:24,815 --> 00:13:26,713
we don't have time for that.

182
00:13:26,713 --> 00:13:30,149
So we're just gonna focus on
the need to knows the now.

183
00:13:30,149 --> 00:13:32,571
We're gonna be animating a little Neopets.

184
00:13:32,571 --> 00:13:35,662
So bonus points to anyone
that remembers them.

185
00:13:39,768 --> 00:13:45,379
So before getting started, you'll need to
add the GreenSock library to your project.

186
00:13:45,379 --> 00:13:48,926
So on code pen we do that
with this little panel.

187
00:13:48,926 --> 00:13:53,950
But you can use NPM or Yarn or
CDN links in a production project.

188
00:13:53,950 --> 00:13:57,667
So once you've got that sorted,
you're ready to start tweening.

189
00:14:00,460 --> 00:14:02,480
So what's tweening?

190
00:14:02,480 --> 00:14:04,695
Just pretending someone's
asked that question.

191
00:14:04,695 --> 00:14:07,401
It's a very good question and
I'm very glad you asked.

192
00:14:07,401 --> 00:14:10,943
So tweening is short for inbetweening.

193
00:14:10,943 --> 00:14:16,614
So a tween is the name for
a single movement in animation.

194
00:14:16,614 --> 00:14:22,029
This could be a movement in
space from point A to point B.

195
00:14:22,029 --> 00:14:26,041
Or it could be in state,
from one color to another.

196
00:14:30,283 --> 00:14:34,225
And the ease that you choose is
what determines the timing and

197
00:14:34,225 --> 00:14:36,703
the spacing of the in between frames.

198
00:14:36,703 --> 00:14:40,618
So things in the real world don't
just move consistently from A to B,

199
00:14:40,618 --> 00:14:44,416
unless they're in space and
don't have gravity to contend with.

200
00:14:44,416 --> 00:14:49,248
So easing is what brings your animation
to life and gives it personality.

201
00:14:52,442 --> 00:14:57,543
GreenSock provides a whole load more
easing equations than we get with CSS and

202
00:14:57,543 --> 00:14:58,570
Cubic Bezier.

203
00:14:58,570 --> 00:15:02,795
So we can make much more interesting and
realistic animations.

204
00:15:06,801 --> 00:15:10,191
You can see there's a little
bounce animation here.

205
00:15:10,191 --> 00:15:13,516
And you can also create your
own custom eases as well.

206
00:15:13,516 --> 00:15:16,354
And this means that you
write less animation code,

207
00:15:16,354 --> 00:15:19,794
because you can get the ease to do
a lot of the hard work for you.

208
00:15:24,201 --> 00:15:27,645
So, with GreenSock,
a tween looks like this.

209
00:15:27,645 --> 00:15:31,432
There's a whole bunch of different
GreenSock methods, but the majority of

210
00:15:31,432 --> 00:15:34,995
the time you'll be choosing whether
to animate to or from some values.

211
00:15:37,312 --> 00:15:39,237
You'll choose what you want to animate.

212
00:15:39,237 --> 00:15:45,414
This can be a CSS selector or a reference
to an element or multiple elements.

213
00:15:45,414 --> 00:15:48,682
You choose how long do
you want to animate for.

214
00:15:48,682 --> 00:15:50,885
And then what values you want to change.

215
00:15:53,048 --> 00:15:57,938
So you can create individual
tweens like this.

216
00:15:57,938 --> 00:16:04,623
Or you can take these tweens and you can
sequence them together on a timeline.

217
00:16:07,412 --> 00:16:12,241
And timelines,
kind of act like a container that you

218
00:16:12,241 --> 00:16:15,990
can put tweens or other timelines into.

219
00:16:15,990 --> 00:16:20,601
And then those timelines help you
keep your tweens organized, and

220
00:16:20,601 --> 00:16:24,155
give you more precise
control over the animation.

221
00:16:24,155 --> 00:16:26,708
So GreenSock even have dev tools.

222
00:16:26,708 --> 00:16:31,725
So you can debug your animations with
a little scrubber, which is super cool.

223
00:16:38,171 --> 00:16:41,756
Timelines also have a bunch of different
methods that you can call if you want to

224
00:16:41,756 --> 00:16:43,128
speed the whole sequence up.

225
00:16:43,128 --> 00:16:45,875
Or if you wanna reverse it,
or play it, or pause it.

226
00:16:45,875 --> 00:16:49,834
So this gives you a lot of control
over interactions and inputs.

227
00:16:49,834 --> 00:16:52,513
And user inputs on the web.

228
00:16:55,748 --> 00:17:00,521
So if you're excited and you want to
have a play around, we've got loads and

229
00:17:00,521 --> 00:17:02,692
loads of starter pens on CodePen.

230
00:17:02,692 --> 00:17:05,684
And the best way to learn
is by experimenting.

231
00:17:05,684 --> 00:17:10,138
I learned by just forking things that I
found on CodePen and having a play around.

232
00:17:13,680 --> 00:17:17,616
And there's a whole bunch of plugins
that are specifically for SVG too.

233
00:17:17,616 --> 00:17:23,383
So this is DrawSVG,
it allows you to show and hide SVG paths.

234
00:17:26,100 --> 00:17:29,528
And this is the kind of thing that
you can achieve with DrawSVG.

235
00:17:33,665 --> 00:17:35,520
There's also MorphSVG.

236
00:17:35,520 --> 00:17:41,742
And MorphSVG makes morphing between
different SVG paths a lot easier.

237
00:17:41,742 --> 00:17:45,258
If you've ever tried morphing
without using some sort of helper,

238
00:17:45,258 --> 00:17:46,901
it's incredibly difficult.

239
00:17:46,901 --> 00:17:48,857
There's a lot of maths involved,

240
00:17:48,857 --> 00:17:52,376
especially when paths don't
have the same number of points.

241
00:17:52,376 --> 00:17:57,141
So there's a whole load of fun stuff
that GreenSock has to play around with,

242
00:17:57,141 --> 00:17:59,828
if you want to explore with SVG animation.

243
00:18:04,190 --> 00:18:08,227
So the last thing that I'll leave
you with is the fact that for

244
00:18:08,227 --> 00:18:13,231
people with vestibular disorders,
animation can make them feel queasy.

245
00:18:13,231 --> 00:18:16,947
So with great power comes
great responsibility.

246
00:18:16,947 --> 00:18:20,570
We can use the proposed
reduced motion media query.

247
00:18:20,570 --> 00:18:24,590
And we can use that to check to see
if a user has a preference set for

248
00:18:24,590 --> 00:18:25,950
reduced motion.

249
00:18:25,950 --> 00:18:28,900
And then we can adjust our
animations accordingly.

250
00:18:28,900 --> 00:18:34,150
So you can do this in CSS or JavaScript
to adjust the experience for people.

251
00:18:38,068 --> 00:18:39,147
So thank you for listening.

252
00:18:39,147 --> 00:18:41,870
I'm sorry about the rocky start.

253
00:18:41,870 --> 00:18:44,470
And I hope to see you in
the GreenSock forum soon.