I'm trying to get Scroll Trigger to start working right after the animation for .presentation on the first timeline.
Is it correct to use 2 timelines? What is the best way to achieve it?
Here is my code so far:
//Animate the left-side
var tl1 = gsap.timeline();
tl1.from(".presentation",{x: -500, duration: 1, opacity: 0})
.addLabel("article", "+=1")
.from("h1", {y: 30, duration: .5, opacity: 0})
.from("h2", {y: 30, duration: .5, opacity: 0}, "-=0.3")
.from(".presentation__icons--item", {y: 30, duration: .5, opacity: 0}, "-=0.3")
.from(".presentation__resume", {y: 30, duration: .5, opacity: 0, stagger: 1}, "-=0.3")
.from(".presentation__email", {y: 30, duration: .5, opacity: 0, stagger: 1}, "-=0.3");
//Animate the right-side
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray("article").forEach(box => {
var tl2 = gsap.timeline({
scrollTrigger: {
trigger: box,
toggleActions: "play reverse play reverse",
start: "-100px 80%",
end: "80% 100px",
markers: true
}
});
tl2.from(box, {
y: 100,
duration: .5,
opacity: 0
});
});
Thank you very much.