I'm new to Greensock and it's amazing, i decided to use GSAP with scrollTrigger plugin for one of my project, my question is - how do we use multiple timelines with scrollTrigger plugin, i have done it like below and it works, is there any better way to do it?
let sections = gsap.utils.toArray(".big-row");
let tl = gsap.timeline({
scrollTrigger: {
trigger: ".horizontal-container",
pin: true,
scrub: 1,
snap: 1 / (sections.length - 1),
end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth
},
})
tl.to(sections, {
xPercent: -100 * (sections.length - 1),
ease: "none"
});
let tl2 = gsap.timeline({
scrollTrigger:{
trigger:'.present-img',
start:"top 80%",
end:"bottom 10%",
markers:true,
scrub:true,
toggleActions:"restart pause reverse none"
}
})
tl2.fromTo('.present-img',{x:-400},{x:0})