Stonino82

Very helpful, thanks.

As I'm not really familiar with GSAP, can you show me how to use the onComplete callback function?

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.