State Animations demos
Demos used in my talk State Animations, getting them right
Demos
Basic transition
Showcase a simple transition usage
Easings graph
Runtime generated easing graphs using VueTweezing and tween.js
Motion graph
Runtime generated motion graphs using VueMotion (spring physics)
Polygon
Demo example for state transitions from the official docs using VueTweezing
Easing with mouse
Using the mouse position to control the easing function instead of time
Plot
Dynamically generated svg plot with natural transitions using VueMotion
Sudoku
Demo example for transition-group from the official docs using VueMotion instead
Music
Bonus example controlling the frame rate of a music with VueMotion or VueTweezing
Testing locally
# install dependencies
$ npm install # Or yarn install
# serve with hot reload at localhost:3000
$ npm run devLibraries used
Conferences
These demos were shown at Vue.js Amsterdam 16 Feb 2018