How can I get these animations to start at the same time?
const tl1 = gsap.timeline({
scrollTrigger: {
trigger: '.sky-container',
end: '+=' + window.innerHeight / 3,
scrub: 0.5,
pin: true
}
});
const tl2 = gsap.timeline({
scrollTrigger: {
trigger: '.sky-container',
end: '+=' + window.innerHeight / 3,
scrub: 0.5
}
});
tl1.to(year1, { opacity: 1, transform: 'translateX(0)' })
.to(year2, { opacity: 1, transform: 'translateX(0)' })
.to(year3, { opacity: 1, transform: 'translateX(0)' })
.to(year4, { opacity: 1, transform: 'translateX(0)' })
.to(year5, { opacity: 1, transform: 'translateX(0)' })
.to(year6, { opacity: 1, transform: 'translateX(0)' });
tl2.to(circle1, {
opacity: 1,
height: 40,
width: 40,
top: 0,
left: 0,
ease: 'none'
})
.to(line1, { opacity: 1, width: '130' })
.to(circle2, {
opacity: 1,
height: 40,
width: 40,
top: 0,
left: 0,
delay: -0.3
})