Vue.js 2 Cookbook

How it works...

The general principle here is that you have a state for an element or component. When the state is numeric in nature, you can "tween" (from between) from one value to the other following a specific curve or acceleration.

Let's break down the code, shall we?

The first thing we do is to take the specified new height for the ball and save it to the newHeight variable:

const newHeight = Number(event.target.value)

In the next line, we are also saving our Vue instance in a _this helper variable:

const _this = this

The reason we do so will be clear in a minute:

const animate = (time) => {   requestAnimationFrame(animate)   TWEEN.update(time) }

In the preceding code, we are wrapping all of our animation in a function. This is ...