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

Team Treehouse - Interactive web animation with SVG

  • 2,148