A Timeline is a powerful sequencing tool that acts as a container for tweens and other timelines, making it simple to control them as a whole and precisely manage their timing. Without Timelines, building complex sequences would get a bit annoying because you'd need to use a delay for every animation.
This parameter let you control the placement of a tweens in a timeline.
const tl = gsap.timeline();
tl
.from('.img1', {autoAlpha: 0, y: -50, duration: 1})
// 1 second after end of timeline (gap)
.from('.img2', {autoAlpha: 0, y: -50, duration: 1}, "+=1")
// 0.5 seconds before end of timeline (overlap)
.from('.img3', {autoAlpha: 0, y: -50, duration: 1}, "-=0.5")
//at exactly 6 seconds from the beginning of the timeline
.from('.img4', {autoAlpha: 0, y: -50, duration: 1}, 6)
You can also add an object with some default values for all the tweens in the timeline.
const tl = gsap.timeline({
defaults: {
duration: 2,
ease: "power4.out"
},
repeat: -1,
yoyo: true,
onComplete: () => console.log("complete")
});
tl
.from('.img1', {autoAlpha: 0, y: -50, duration: 1})
.from('.img2', {autoAlpha: 0, y: -50, duration: 1}, '-=0.75')