Web Animation, SVG DOM – Basics

gravatar
By Marcin
 · 
October 8, 2020
 · 
3 min read

These are notes from a course by Sarah Drasner called "SVG Essentials & Animation"

The original course was released January 14, 2019. GSAP was in version 2 then.


SVG DOM

The SVG space is like an infinite graph. Things are placed with coordinates. The viewbox is the area that you can see.

Platonic Shapes

  • Rectangle
  • Circle
  • Polygon
  • Line
  • (Polyline)

Like Rectangles, viewbox sizing controls list their size properties as 4 numbers. x y width height: 0 0 500 750

The viewBox is the visible area, and changing the height and width makes it "scale" up or down. The same graph, just bigger or smaller on the screen.

Positioning & Maintaining Aspect Ratio

preserveAspectRatio

Params = yMin yMid yMax
Top Middle Bottom

Params = xMin xMid xMax
Right Middle Left

Param = meet
this is the default canvas behavior.

Param = slice
this creates actual slices, and can be used in conjunction with all the xMin and yMin params above.

Param = none
removes all constraints

Paths & Groups

G is like a div, a way of grouping multiple objects

d means "drawing" and m stands for "move to"
"z" will connect that coordinate with the first plot on the graph

SVG Path Tools:

Cleaning up SVGs, Optimizing

  1. Remove unnecessary path points
  2. Recreate shadows using SVG filters
  3. Replace the most redundant filled color paths with a single large color rectangle behind all the paths.

SVG Creation and Optimization Tools

JPEG to SVG https://convertio.co/jpg-svg/

After export, before implementation optimization tools:

Preparing an SVG for Animation

This may require some prep. Common prep could include

  • Target the circle
  • Expand the viewbox
  • Use fill
  • Remove fill from the markup

SVG Animation Tools

SVG Animation vs Canvas

SVG

Pros

UI/UX Animation

Resolution independent

Easier to debug

Cons

Tanks with lots of objects, so you need to be careful with how you animate

Canvas

Pros

Great for immersive 3d stuff

Move tons of objects

Cons

Hard to make accessible

Not resolution independent out of the box

Breaks to nothing

Web Animation Options

CSS

Good or small sequences and simple interactions

once you are chaining more than 3 things

Web Animations API

Looks great but not enough support yet, and it has been deprioritized. Maybe not worth learning until it's reprioritized

GSAP.js

Great for sequencing and complex movement

Cross browser consistency

Anime.js / Velocity.js / Mo.js

Anime.js - very much like GSAP, but open source and with fewer plugins.

Velocity.js - might be less performant.

Mo.js - wont come out of beta because the founder suggests people use GSAP

React Spring/ React-Motion

Great for single movements that you'd like to look realistic (even dragging things across the screen). Great easing curves.

Snap.js

jQuery for SVG

d3.js

was built for data vis, but a lot can be done with it.

p5.js

was built for generative design and creative coding. least common for my projects.

Performance

Comments

No Comments.