If you find yourself writing multiple tweens to animate one target, it may be time to reach for keyframes. Keyframes are a great way to move a target through a series of steps while keeping your code concise.
Take a repetitive timeline like the one below — It can be simplified down nicely to fit into one tween:
// timeline
let tl = gsap.timeline();
tl.to(".box", {
x: 100
})
.to(".box", {
y: 100
})
.to(".box", {
x: 0
})
.to(".box", {
y: 0
});
// Array-based
Keep your animation code concise by using keyframes - this article explains the three syntax options.