how can i make each item last longer until its transition is complete?

问题

I have this code with which I hope to make myself understood.

  gsap.registerPlugin(ScrollTrigger);
  ScrollTrigger.defaults({
    toggleActions: "restart pause resume none",
    // markers: true,
  });
  let square = gsap.timeline({
    scrollTrigger: {
      start: "top center",
      end: "200px 100px",
      toggleActions: "restart none reverse none",
      //markers: true,
      scrub: true,
      trigger: ".square1",
      toggleActions: "restart none reverse none",
    },
  });


  square.from(".square1", {
    autoAlpha: 0,
    duration: 3,
  });
  square.from(
    ".square2",
    {
      autoAlpha: 0,
      duration: 3,
      x: "-50%"
    },
    "-=3"
  );

let circle=gsap.timeline({
    scrollTrigger: {
      start: "top center",
      end: "200px 100px",
      toggleActions: "restart none reverse none",
      //markers: true,
      scrub: true,
      trigger: ".circle",
      toggleActions: "restart none reverse none",
    },
  });


 circle.from(".circle", {
    autoAlpha: 0,
    duration: 1000,
    rotate:30
  });

In my real code, I plan to include audios for each animation. For example, the first audio can last 30 seconds, so I would like the first animation to last 30 seconds and when it ends, the next one begins, which will have the same scenario, for example, audio 2 has 20 seconds so I will need my second animation to last a total of 20 seconds.

I'm using the duration property, but I'm not achieving my goal, I don't know how to delay the next animation or make an animation last longer.

Note: eventually I will do something to make the scroll move automatically, but eventually the user will be able to move the scroll and from the point where the scroll stops my animation will continue. and this offset will be a transition of scroll from position y = 0 to the end in a total number of seconds according to the number of total audios. I hope to make me understand

With this example I would like to simulate that the first animation takes a long time and when it finishes continue the next one and so on.

I hope to make me understand

how can I do it?

this is my live code:

http://plnkr.co/edit/PvHLb9b0HHcdX3Er?open=lib%2Fscript.js

来源：https://stackoverflow.com/questions/65068807/how-can-i-make-each-item-last-longer-until-its-transition-is-complete

标签

javascript

gsap