State Animations

Amsterdam 16 Feb

GitHub icon
Twitter icon


San Martin Morote

Vue core team

Author of VueFire 2, VueMotion, VueTweezing

Vue Instructor around Europe


GitHub icon


Made with Nuxt!

Animations are hard

Activity monitor

Animations should be fast

Hi there 👋

I'm taking

my time

to appear...

Animating when...

  • The user does something
  • We need user's attention
  • We want to make things fun



Based on

  • v-if
  • v-show
  • key
  • v-for
<transition name="fade" mode="out-in">
  <router-view :key="$route.fullPath"/>



CSS or


Limited to

  • Elements appearing
  • Elements disappearing
  • Elements reordering
  • CSS properties

State Animations

What is it?

How to go from one state to another


  • Boolean toggling
  • Easings
  • Physics 

Boolean state Class switching

👎 rotation, translation, scaling (unless linear easing)

👍 opacity, colours, etc

👉 Basic Transition

👌 with computed properties

computed: {
  checkoutButtonClasses () {
    return {
      // apply a transition on colour
      'is-disabled': this.cart.length > 0


Go from 10 to 100 Bouncing out in 1 second

10: initial value

100: target value

Bouncing out: Easing

1s: duration

👉 Easing graph


Go to 100 quickly and no oscillation

100: target value

quickly: high stiffness

no oscillation: low damping

👉 Motion graph


  • highly customisable
  • many existing easings
  • custom duration
  • easy to chain
  • playback control


  • two parameters
  • always feels natural
  • handles interruptions/changes


(or any other tweening lib)

// setup the animation loop
// (do it somewhere, but only once)
function animate(time) {

const container = { x: 0 } // Tween modifies this
const tween = new TWEEN.Tween(container)
  .to({ x: 300 }, 1000) // change to 300 in 1s
  .onUpdate(() => {
    // container.x is updated
  .start() // Start the tween immediately.

Necessary boilerplate to create one single tween 😱

Tweening with

Vue tweezing

Easings controlled by scroll/Mouse

Using the scroll instead of time as input

👉 Easing with mouse

✨ Declarative Tweening

  :to="1" tween="custom"
  <div slot-scope="value">
    <pre>{{ value }}</pre>
    <div class="ball" :style="ballStyle(value)">

Polygon example

Originally from docs

by @chrisvfritz

👉 Polygon

✨ Declarative Tweening


Tweezing component

  • Watch target value ➡️ create Tween

  • Provide tweened value with a scoped slot

this.rotation // 10
this.rotation = 220
// triggers a new tweening

Tween engines

import {
} from 'vue-tweezing'
import TWEEN from '@tweenjs/tween.js'

Vue.use(Tweezing, {
  tweenjs: tweenjsHelper(TWEEN),


export function tweenjsHelper (TWEEN) {
  return function (value, end, opts) {
    const container = { value }
    // cancel previous tween
    return new TWEEN.Tween(container)
      .to({ value: end }, opts.duration)
      .interpolation(opts.interpolation || TWEEN.Interpolation.Linear)
      .easing(opts.easing || TWEEN.Easing.Quadratic.Out)
    // TODO should probably emit the name of the property too
    // default could be the name if only one value is provided
      .onStart(() => this.$emit('start'))
      .onUpdate(() => {
      .onComplete(() => this.$emit('end'))


🗜< 1kb



vue motion

svg Chart


by @sarah_edo

👉 Plot

✨ Declarative Spring

<Motion tag="g" :values="selectedValues">
  <template slot-scope="values">
    <g v-for="(y, i) in values" class="bars">
        :x="i * 10 + 20"
        :y="getMax - y * 10"
        :height="y * 10"

Lazy sudoku example

Originally from docs

by @chrisvfritz

👉 Sudoku


with springs

✨ Declarative Spring

<Motion :values="positions" spring="wobbly">
  <template slot-scope="positions">
    <div v-for="cell in cells"
        transform: `translate(\
      {{ cell.number }}


🔈 Sounds


Getting started

⚠️ vue-motion and vue-tweezing are experimental

🗣Feedback is very welcome!

Thanks! 🖖

GitHub icon

State Animations with Vue

By Eduardo San Martin Morote

State Animations with Vue

Aah, animations. Moving things on the screen will either fascinate your users or make them close your app right away. Add no animations and your users will feel sometimes lost. Add too much and they will be disgusted. But, to make it harder, animations by themselves have to be configured just right to have a meaning. Speed, duration and the object being animated have to be set just right. Now, Vue already provides us with two nice components: transition and transition-group that are based on CSS animations. But what about the state? Numerical values that change and you want to animate. During my talk, I will explain what state transitions are, how they differ from CSS transitions, what are they used for and show some practical implementations. We will cover good and bad practices while we delight ourselves with some demos.

  • 4,518