ScrollTrigger inside a timeline animation

[Stonino82]

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.

[elegantseagulls]

This would be the correct setup for setting up an animation separate from your scrollTriggers. (Also, you don't necessarily need a .timeline() for your second tweens.)

To be noted: This setup will not prevent your ScrollTrigger tweens from being fired at the same time as your first timeline, as multiple timelines don't fall into succession. If you wanted to make sure the first timeline played before your scrollTriggers you could use an onComplete callback function on your first timeline to setup the scrollTriggered animations..

[Stonino82]

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

[elegantseagulls]

You might find this useful: https://greensock.com/docs/v3/GSAP/Timeline/eventCallback()

 

Also:

See the Pen zYrPqpj by ryan_labar (@ryan_labar) on CodePen

 

[Stonino82]

Very helpful, thanks.