Creative Coding with SVGs
zuubaDigital

Intro

what is "animation?"

In order to animate an object, you must change some visual property of that object continuously and incrementally over time.

animation_intro.png

why?

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

how?

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.

No Library needed:

  • CSS: transitions and keyframes
  • Javascript: requestAnimationFrame and dynamically adding/removing CSS animation classes;
  • SMIL: SVG's built in tool to declaratively add animations to SVG elements.

We'll also take a brief look at a few powerful animation libraries that we can utilize, if we so choose.

Library

  • GSAP: An extremely powerful and widly used Javascript library that allows you to build complex animations.
  • Matter JS: Matter.js is a 2D physics engine for the web. While Matter JS has it's own rendering (via the canvas elwment), we can use it's physics engine to animate SVG elements.

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