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.
- Principles of UI/UX Animation
- Transition Component
- Transition-Group && Class/Style Bindings
- Basics of TweenMax
- Transitioning State
- SVG Animation
- Nuxt Page Transitions
- Custom Directives && Animation
All slides have password vue!
Included in this repo are some very basic starter kits.
SVG Resources:
GreenSock Docs, Forums, and Easing Visualizer.
There are three directories you can use as GSAP starter kits:
- basic-tween
- basic-timeline
- master-timeline
There are three directories you can use as Nuxt starter kits:
- nuxt-css-animation-starter
- nuxt-js-animation-starter
- nuxt-fixed-transition-modes