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:
Bonus:
All slides have password svgisawesome!@
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:
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