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:

• 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!

Collections:

• Vue Animation Collection
• SVG and CSS/GreenSock CodePen Collection

Included in this repo are some very basic starter kits.

Resources to find free SVG online

SVG Resources:

• Icomoon
• The Noun Project
• Freepik

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