See the Codepen. Obviously when u click, obj animates to the value target had on click. But if I wanted obj to animate to whatever value target would have at the end of the 1 second duration, how would you approach that? My initial thought is doing a lerp, but I wanted to see if GSAP has some clever functionality for this case first. I think FLIP can do something similar?
Code from the Codepen:
const target = { x: 0, y : 0 }
const obj = { x: 0, y: 0 }
const targetEl = document.querySelector('.js-target')
const objEl = document.querySelector('.js-obj')
objEl.textContent = `x: ${obj.x}, y: ${obj.y}`
function tick() {
target.x = gsap.utils.wrap(0, 1000, target.x + 1)
target.y = gsap.utils.wrap(0, 1000, target.y + 1)
targetEl.textContent = `x: ${target.x}, y: ${target.y}`
}
gsap.ticker.add(tick)
document.addEventListener('click', () => {
gsap.to(obj, {
duration: 1,
x: target.x, y: target.y,
onUpdate: () => {
objEl.textContent = `x: ${obj.x}, y: ${obj.y}`
}
})
})