A light motion library with curvilinear support, inspired by Popmotion.
![npm downloads](https://camo.githubusercontent.com/a417ab4e1c1eec5fffd6c4d0972cc5b2db30cc6330ebd6425963ddcc673afd03/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f40747569612f6d6f746f2e6a732e7376673f7374796c653d666c617426636f6c6f72423d627269676874677265656e)
API
![tween](https://camo.githubusercontent.com/c1151bbbb0ade10423ea9425cd66a9fa9e9fcb358ddfb01940f6cc00c351b0da/68747470733a2f2f79756e2e64756962612e636f6d2e636e2f6d6f746f2f747765656e2e676966)
import {tween} from '@tuia/moto.js'
tween({
from: {x: 0, radius: 0, opacity: 1},
to: {x: 200, radius: 25, opacity: .5},
duration: 3,
yoyo: Infinity
}).start(v => {
target.style.transform = `translateX(${v.x}px)`
target.style.borderRadius = `${v.radius}px`
target.style.opacity = `${v.opacity}`
})
![chain](https://camo.githubusercontent.com/58dd7d218b3bbbc4eff80a143c06511f6ec1b3a463ec61d17aa9ce0e08668035/68747470733a2f2f79756e2e64756962612e636f6d2e636e2f6d6f746f2f636861696e2e676966)
import {chain, tween} from '@tuia/moto.js'
chain(
tween({
from: {x: 0, radius: 25},
to: {x: 200, radius: 0}
}),
tween({
from: {x: 0, radius: 0, g: 204, b: 51},
to: {x: -200, radius: 25, g: 51, b: 204}
})
).start(v => {
let target = v.g ? targetA : targetB
target.css({
transform: `translateX(${v.x}px)`,
borderRadius: `${v.radius}px`,
backgroundColor: v.g ? `rgb(255, ${v.g}, ${v.b})` : '#fc3'
})
})
![composite](https://camo.githubusercontent.com/2002b00052e2855635f7272a3e224814a1048ca935e726929ca4d22769606289/68747470733a2f2f79756e2e64756962612e636f6d2e636e2f6d6f746f2f636f6d706f736974652e676966)
import {curve, composite} from '@tuia/moto.js'
composite({
position: curve.cubicBezier({
points: this.points,
duration: .6
}),
color: tween({
from: {g: 204, b: 51},
to: {g: 51, b: 204},
duration: .6
})
}).start(v => {
const
target = this.$refs.target,
dot = document.createElement('i')
dot.classList.add('dot')
target.css({
backgroundColor: `rgb(255, ${v.color.g}, ${v.color.b})`
})
dot.style.top = target.style.top = `${v.position.y}px`
dot.style.left = target.style.left = `${v.position.x}px`
target.parentElement.appendChild(dot)
})
![bezier](https://camo.githubusercontent.com/09938bdd75a0e99deaf6de5337da2d9967b77113b3c38f657f5e24c7fc441f0c/68747470733a2f2f79756e2e64756962612e636f6d2e636e2f6d6f746f2f62657a6965722e312e676966)
import {curve} from '@tuia/moto.js'
curve.bezier({
points: [
{x: 50, y: 50},
{x: 150, y: 150},
{x: 250, y: 50}
],
duration: 3
}).start(v => {
const dot = document.createElement('i')
dot.classList.add('dot')
dot.style.top = target.style.top = `${v.y}px`
dot.style.left = target.style.left = `${v.x}px`
target.parentElement.appendChild(dot)
})
![cubicBezier](https://camo.githubusercontent.com/381bce6a6939ce8d57f8dbf57d875a25b15b3283613757ca0b46dc57fd1fded1/68747470733a2f2f79756e2e64756962612e636f6d2e636e2f6d6f746f2f62657a6965722e63756269632e676966)
import {curve} from '@tuia/moto.js'
curve.cubicBezier({
points: [
{x: 50, y: 50},
{x: 100, y: 150},
{x: 300, y: 50},
{x: 350, y: 150}
]
}).start(v => {
const dot = document.createElement('i')
dot.classList.add('dot')
dot.style.top = target.style.top = `${v.y}px`
dot.style.left = target.style.left = `${v.x}px`
target.parentElement.appendChild(dot)
})
![catmullRom](https://camo.githubusercontent.com/83dfacbf453db9d1a5e692307d177459e0315c8e35dd6848a18e60fa20a4c92a/68747470733a2f2f79756e2e64756962612e636f6d2e636e2f6d6f746f2f6361746d756c6c2d726f6d2e676966)
import {curve} from '@tuia/moto.js'
curve.catmullRom({
points: [
{x: 50, y: 50},
{x: 100, y: 150},
{x: 200, y: 100},
{x: 300, y: 50},
{x: 350, y: 150}
]
}).start(v => {
const dot = document.createElement('i')
dot.classList.add('dot')
dot.style.top = target.style.top = `${v.y}px`
dot.style.left = target.style.left = `${v.x}px`
target.parentElement.appendChild(dot)
})