TweenedNumber

A component for tweening between numeric values.

Features

Allows you to tween any given numbers. You also have the ability to change CSS or invoke logic while the value is tweening or once the tweening is completed.

Events

This component allows two event hooks.

• @update allows you to execute logic while the value is tweening.
• @complete allows you to execute logic once the tweening is completed.

Example

<TweenedNumber
  :value="number"
  :duration="2000"
  :easing="easing.bind()"
  @update="update"
  @complete="complete"
/>
...
methods: {
  update() {
    // Do something
  },
  complete() {
    // Do something
  },
},

To get access to the original DOM event, use the special $event variable.

<TweenedNumber
  :value="number"
  :duration="2000"
  :easing="easing.bind()"
  @update="update($event)"
/>
...
methods: {
  update(event) {
    // eslint-disable-next-line no-console
    console.log('updating', event);
  },
},

Props

tag (String, Default: 'span') The type of HTML element you want.

value (Number, Required) The value that you want to tween.

easing ([String, Function], Default: TWEEN.Easing.Linear.None) What determines how Tween.js interpolates between values. For more information on Tween easing methods click here.

duration (Number, Default: 1000) How long you want the tweening to last.

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Lints and fixes files

yarn run lint