Breaking down SVG animation

Animation is slightly scary.

Why?

  • Lacking fundamentals
  • Difficulty to visualize animation
  • Unfamiliar territory

codepen.io/rrenula/

Fundamentals

Don't know where to start?

  • Rotate

  • Scale

  • Opacity

  • Translate

Animation for UI is pretty simple.

What about cartoons & characters?

Inspiration

Credit: https://davidwalsh.name/svg-animations-snap

Scale, Translate, & Opacity

Prototyping animation

Can't visualize?

Separate things you want to animate.

Go crazy & combine fundamentals!

Unfamiliar territory?

Translate up & down + 0.05 speed

Animation is not that scary.

Conclusion?

Thank you!

Made with Slides.com