Demos used in my talk State Animations, getting them right

See the result online

Showcase a simple transition usage

Runtime generated easing graphs using VueTweezing and tween.js

Runtime generated motion graphs using VueMotion (spring physics)

Demo example for state transitions from the official docs using VueTweezing

Using the mouse position to control the easing function instead of time

Dynamically generated svg plot with natural transitions using VueMotion

Demo example for transition-group from the official docs using VueMotion instead

Bonus example controlling the frame rate of a music with VueMotion or VueTweezing

# install dependencies
$ npm install # Or yarn install

# serve with hot reload at localhost:3000
$ npm run dev

• VueMotion
• VueTweezing
• tween.js
• p5

These demos were shown at Vue.js Amsterdam 16 Feb 2018

Slides