Cassie Evans PRO
Brighton based front-end dev & designer. disOrganiser @GeneratorBtn. Has a particular fondness for web animation.
https://cassie.codes
lt me
https://cassie.codes
🤔 What is SVG? 🤔
😎 Scalable Vector Graphic 😎
Simplified SVG markup.
<svg viewBox="0 0 100 100">
<path d="M10 10H90V90H10Z"/>
<circle cx="50" cy="50" r="40"/>
</svg>SVG is an alternate universe version of HTML, focused on graphics instead of documents.
- Richard Westenra
🙌 Illustrations... 🙌
that you can manipulate with code!
lovely semantic elements
Animation Time!
CSS
.element {
animation-name: fade;
animation-duration: 2s;
}
@keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}transform-origin: 200px 50px;
.element {
transform-box: fill-box
}
.element {
transform-box: view-box
}
.element {
transform-box: fill-box
}
.element {
transform-box: view-box
}
@supports (transform-box: fill-box) {
/*animation code here*/
}
.element {
animation-name: first-animation;
animation-duration: 2s;
}
.element-two {
animation-name: second-animation;
animation-duration: 3s;
animation-delay: 2s;
}
.element-three {
animation-name: third-animation;
animation-duration: 3s;
animation-delay: 5s;
}
.element-four {
animation-name: fourth-animation;
animation-duration: 4s;
animation-delay: 8s;
}
.element-five {
animation-name: fifth-animation;
animation-duration: 12s;
animation-delay: 2s;
}
.element-six {
animation-name: sixth-animation;
animation-duration: 3s;
animation-delay: 14s;
}
TRANSFORMS
😔
💜
💜
HELP!
Docs & codepens
LICENCING
TIMELINES
FILE SIZE
(GZIP)
Docs & codepens
Docs, forums & codepens
MIT
MIT
Core is Free.
Paid plugins
7kB
15kb
23kb
💜
😔
😔
- Supportive forums
- SVG specific plugins
GSAP 101
Umm.
What's "Tweening?"
A
B
hsl(260, 60%, 65%)
hsl(160, 51%, 60%)
gsap.method(element, duration, vars)
gsap.to(element, duration, vars)
gsap.from(element, duration, vars)
gsap.from(".neopet", duration, vars)
gsap.from(".neopet",2, vars)
gsap.from(".neopet",2,{xPercent: 250})
gsap.from(".neopet",2,{xPercent: 250})
timeline.timeScale(1.5)
timeline.play()
timeline.pause()
timeline.reverse()
Original artist: Salih Abdul-Karim. (done in bodymovin)
const safeToAnimate = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
if(safeToAnimate) {
lovely safe animation code stuffs
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Thank you for listening!
@cassiecodes - twitter & codepen
Team Treehouse - Interactive web animation with SVG
By Cassie Evans
