I have a trigger, when the scrolltrigger is activated, other elements are animated using a "timeline" how can I decide the duration of the animation for each of those elements

[yeisonvelez11]

I have the following code:

 

    let tl = gsap.timeline({
      scrollTrigger: {
        start: "top center",
        end: "+=50%",
        trigger: ".trigger",
        toggleActions: "restart none reverse none",
        markers: true,
        scrub: true,
      },
    });

    tl.from("#square", {
      autoAlpha: 0,
      scale: 5,
      duration: 8,
    });

    tl.to("#square", {
      x: 100,
      duration: 5,
    });
 

when the scrolltrigger is activated, an element with the  #square is animated, I would like the first part of this animation to last 8 seconds

 

    tl.from("#square", {
      autoAlpha: 0,
      scale: 5,
      duration: 8,
    });

 

and the other part of the animation lasts 3 seconds.

 

    tl.to("#square", {
      x: 100,
      duration: 5,
    });

how can I do it?

excuse my ignorance, but I don't know how to do it, it not works for me.

 

this is my live code:

 

I don't know if seconds can be represented with the scrollTrigger, or at least I'd like to know how to make one animation last much longer than another. in my case the first lasts much longer in relation to the second, but I don't understand how the duration attribute works in this case. don't know if saying that an animation will have 8 seconds and another 5 seconds, the total duration will be 13 seconds in total

 

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

 

thanks

[ZachSaucier]

Hey yeisonvelez11. This duration when you have a scrub is explained in the ScrollTrigger docs  

 

You can't have both a scrub and a literal second duration of animations because the scroll speed is controlled by the user.