SVG Essentials & Animation Course Materials

Starter Materials for the SVG Animation Course

Author: Sarah Drasner

This repo houses the materials and resources for the SVG Essentials & Animation course on Frontend Masters.

Most of the materials for the course are outlined below, but there are also directories housed here of very basic examples of some of the techniques we will cover so that students don't have to spend a lot of time researching in order to get started. It is recommended that students use CodePen to create work for the duration of the course, as we'll use preprocessors like SCSS as well as Babel for ES6 and codepen makes it easy to do so without time devoted to setup. If you like, you can also scroll to the CodePen collection section and fork one of the existing pens in those collections, they are comprehensive. GreenSock pens in the collection use member's only plugins that are CodePen-safe. For MorphSVG, DrawSVG, and FindShapeIndex sections, localhost will fail and using CodePen is recommended.

Here is a URL that has all of the codepen-safe versions of the GSAP Plugins

Here is the codepen debugger chrome extension

For sections covering React-Motion, it may make more sense to use Create-React-App so that your workflow more closely mirrors development, but that decision is up to you.

Slides:

• SVG Workshop 1
• SVG Workshop 2
• SVG Workshop 3

Bonus:

• SVG Workshop- DataVis
• SVG Workshop- Mo.js

All slides have password [email protected]

Collections:

• SVG and CSS/GreenSock CodePen Collection
• SVG Resources
• My Favorite SVG Animations- inspiration
• Intro to D3 Collection
• Mo.js Collection

Included in this repo are some very basic starter kits.

Part One, Section Three

There is a resource for the sprite and CSS animation SVG, should you need a starter resource. SVG Resources:

• http://icomoon.io/
• [https://thenounproject.com/](The Noun Project)
• http://www.freepik.com/

Part Three, Section Six

GreenSock Docs, Forums, and Easing Visualizer.

There are three directories you can use as GSAP starter kits:

• vanillajs-interaction
• basic-tween
• basic-timeline
• master-timeline

Part Four, Section Seven

There are a few ways to work with the GSAP timeline in this file: gsap-resources.js.

DataVis

The starter resource for this section is in the directory basic-d3. This is d3 version 4, so be wary that if you try out of the box things that exist in the d3 docs for the blocks, they might not work. (Not very many d3 blocks have been updated.) Big changes include axis and transition, new version demo-ed here.

React

There are two basic starter directories included here for React. One is basic-react-svg-css, which shows a very simple use case of a reusable SVG component animated with CSS. There is also basic-react-motion, which shows a single staggered motion animation.

Mojs

Mojs-shapes directory includes every out of the box shape that mo.js allows you to create. You can also create custom shapes (look in the mo.js codepen collection for bouncy radio demo for an example).

Mojs-tools directory shows a simple shape tween and .then() syntax with both timeline and curve-editor tools loaded in.

License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License