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!