mirror of
https://github.com/tweenjs/tween.js.git
synced 2025-12-08 20:16:12 +00:00
29 lines
809 B
JavaScript
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)`
|
|
}
|