#086 Animation
All about SVG for web design and animation.
Notes
Interactive Web Animation with SVG
Interactive web animation with SVG by Cassie Evans CSSCAMP 2019:
My notes from the presentation:
- create initial artwork, or find existing e.g. with freepik
- plan out animation with individual artboards/key frames
- collect all bits or animation into one SVG
- clean up the SVG code e.g. with svgomg
- start working on animations - codepen is a good place for this
- CSS transforms - simple place to start (some browser compatibility issues)
- animation libraries for more complex
| Library | Transforms | Timelines | Size | License |
|---|---|---|---|---|
| anime.js | √ | √ | 6kb | MIT |
| greensock | √ | √ | 9-36kb | Mostly Free |
| velocity.js | √ | √ | 15kb | MIT |
A Little Test
Original artwork: kraken.svg - made by Freepik.
- kraken.original.svg - original local copy
- kraken.cleaned.svg - cleaned up with svgomg
Step 1: Simple CSS Animation
The kraken.svg only has two paths nicely separated - the eyes, and everything else. So a simple animation task (without having to rip apart the SVG) would be to move the eyes.
The kraken-css-anim.html is an example of doing this with simple transform keyframes. This is a snapshot of a simple coden here.
Note: there are many ways of embedding the SVG from file, but it seem all the standard options do not allow the loaded SGV paths to then be manipulated with CSS. Hence the example has the SVG image inlined.
){kind=link}
SVG Paths
See SVG Paths spec
Example:
<path d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" />
All instructions are expressed as one character:
M(absolute),m(relative) - moveto - Start a new sub-path at the given (x,y) coordinatesZorz- closepath - ends the current subpath by connecting it back to its initial pointL(absolute),l(relative) - lineto - Draw a line from the current point to the given (x,y) coordinateH(absolute),h(relative) - lineto - Draw a horizontal line from the current point to the given (x) coordinateV(absolute),v(relative) - lineto - Draw a vertical line from the current point to the given (y) coordinateC(absolute)c(relative) - curveto - (x1 y1 x2 y2 x y)+ - cubic Bézier curveS(absolute)s(relative) - shorthand/smooth curveto - (x2 y2 x y)+ - cubic Bézier curveQ(absolute)q(relative) - quadratic Bézier curveto (x1 y1 x y)+ Draws a quadratic Bézier curveT(absolute)t(relative) - Shorthand/smooth quadratic Bézier curveto (x y)+ Draws a quadratic Bézier curveA(absolute)a(relative) - elliptical arc (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ Draws an elliptical arc