[ScrollTrigger inside a timeline animation]

Very helpful, thanks.

[ScrollTrigger inside a timeline animation]

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

[ScrollTrigger inside a timeline animation]

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.