https://github.com/posva/state-animation-demos
Demos for Vue.js amsterdam/roadtrip talk: State animations, getting them right
https://github.com/posva/state-animation-demos
Last synced: over 1 year ago
JSON representation
Demos for Vue.js amsterdam/roadtrip talk: State animations, getting them right
- Host: GitHub
- URL: https://github.com/posva/state-animation-demos
- Owner: posva
- Created: 2018-02-16T11:34:48.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-25T09:46:41.000Z (about 8 years ago)
- Last Synced: 2025-01-05T16:49:21.430Z (over 1 year ago)
- Language: Vue
- Homepage: https://state-animations.surge.sh/
- Size: 7.13 MB
- Stars: 44
- Watchers: 5
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# State Animations demos
> Demos used in my talk State Animations, getting them right
[See the result online](https://state-animations-amsterdam.surge.sh)
## 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
``` bash
# install dependencies
$ npm install # Or yarn install
# serve with hot reload at localhost:3000
$ npm run dev
```
## Libraries used
- [VueMotion](https://github.com/posva/vue-motion)
- [VueTweezing](https://github.com/posva/vue-tweezing)
- [tween.js](https://github.com/tweenjs/tween.js)
- [p5](https://github.com/processing/p5.js)
## Conferences
These demos were shown at Vue.js Amsterdam 16 Feb 2018
[Slides](https://slides.com/posva/state-animations)