How to lerp my model one at a time?

Questions
1

Hello i am trying to lerp the position and then the rotation of a model. It looks like this:

if (condition) {
cube.position.z = lerp(cube.position.z, -2, delta * 1)
cube.rotation.y = lerp(cube.rotation.y, +degToRad(180), delta * 2)
}

Once the if condition is true everything will be executed at once. Is it possible to make the code run one after another?
Like lerp to new position first, wait until its done then lerp to new rotation wait until its done.

The if statement is inside my animate() function.

Best Regards

2

Figured it!

Since lerp will transition to the given value over time, i used that as a condition before running the next line of code. So once cube.position.z <= -2 then run next codeblock.

1 Like
4

Another approach is to use a tweening library like GSAP or tweenjs to manage the tweens… they let you use a more declarative language to sequence these kinds of tween operations, and apply different easing functions to the motion.

Another option is integrating a library like theatre.js which can give you a more interactive editing and visualization setup to help tune the motions during development.