In order to animate an object, you must change some visual property of that object continuously and incrementally over time.
Animation can be used as a tool for many things - to focus the user’s attention, to ease cognitive load by “revealing” elements of a page, or simply to capture the viewers imagination. SVGs are ideal for creating animations for several reasons:
The SVG DOM which gives us the ability to dynamically create, update and alter the appearance of an SVG
An SVG has its own coordinate system, which allows for pixel-perfect placement.
The SVG has access to filters, patterns and masks that enable the creation of powerful visual effects
While animation is a HUGE topic and worthy of its own class, I’ll just touch upon a few different techniques that can be utilized to bring life to an SVG image.
While there are MANY tools available to add animations to SVGs, we're going to focus primarily the tools that are already natively part of CSS, Javascript, and the SVG spec.
We'll also take a brief look at a few powerful animation libraries that we can utilize, if we so choose.
CDN for GSAP: https://cdnjs.com/libraries/gsap
GSAP install: https://gsap.com/docs/v3/Installation/?tab=npm&module=esm&method=private+registry&tier=free&club=false&require=false&trial=true timeline/sequencing morph (club member plugin)
CDN for MatterJS https://cdnjs.com/libraries/matter-js