Skip to content
Animated Interfaces with Vue.js Workshop Materials
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
basic-timeline
basic-tween initial commit Jun 20, 2017
master-timeline initial commit Jun 20, 2017
nuxt-css-animation-starter initial commit Jun 20, 2017
nuxt-fixed-transition-modes initial commit Jun 20, 2017
nuxt-js-animation-starter initial commit Jun 20, 2017
starter-svgs initial commit Jun 20, 2017
.gitignore initial commit Jun 20, 2017
README.md add in new slide decks, cheatsheet Mar 25, 2018
gsap-cheatsheet.js add in new slide decks, cheatsheet Mar 25, 2018

README.md

Animated Interfaces with Vue.js Workshop Materials

Starter Materials for Animated Interfaces with Vue.js Workshop Author: Sarah Drasner

This repo houses the materials and resources for the Animated Interfaces with Vue.js. 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 resources like GSAP and Vue.js 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 Nuxt, we will be using the directories listed in the Nuxt section below as well as their directories, prefixed with nuxt- here.

Slides:

All slides have password vue!

Collections:

Included in this repo are some very basic starter kits.

Resources to find free SVG online

SVG Resources:

GreenSock Resources

GreenSock Docs, Forums, and Easing Visualizer.

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

  • basic-tween
  • basic-timeline
  • master-timeline

Nuxt Resources

Nuxt Docs

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

  • nuxt-css-animation-starter
  • nuxt-js-animation-starter
  • nuxt-fixed-transition-modes
You can’t perform that action at this time.