29 lines
809 B
JavaScript

import * as TWEEN from '@tweenjs/tween.js'
// For sake of example, we put animate() in a separate file, and import it into index.js.
import {animate} from './animate.js'
const position = {x: 100, y: 100, rotation: 10}
const target = document.getElementById('target')
const tween = new TWEEN.Tween(position)
.to({x: 700, y: 200, rotation: 359}, 2000)
.delay(1000)
.easing(TWEEN.Easing.Elastic.InOut)
.onUpdate(update)
const tweenBack = new TWEEN.Tween(position)
.to({x: 100, y: 100, rotation: 10}, 3000)
.easing(TWEEN.Easing.Elastic.InOut)
.onUpdate(update)
tween.chain(tweenBack)
tweenBack.chain(tween)
tween.start()
animate(performance.now())
function update() {
target.style.transform = `translate3d(${position.x}px, ${position.y}px, 0.0001px) rotateY(${Math.floor(position.rotation)}deg)`
}