Fatina with Vue 3

[kefniark]

Description

Just to showcase the new Transition Syntax

Works really well with vue composition API

import Fatina from "https://cdn.skypack.dev/fatina"

//...

setup () {
  const pos = ref({ x: 250, y: 250 })
  return { pos, anim: Fatina.transition(pos.value) }
}

Then later in HTML template

<!-- Use the position variable to position an html element -->
<img src="https://pixijs.io/examples/examples/assets/bunny.png" :style="`transform: translate(${pos.x}px, ${pos.y}px)`" />

<!-- Start an animation on click -->
<q-btn color="primary" @click="anim.to({ x: 500 })" label="right"></q-btn>

One-liner tweens directly in vue template 🥳

Demo Link

https://codepen.io/kefniark/pen/podzpLY