Need help about timeline and scrolltrigger combination

[xlr8_ion]

I have created a timeline and scrollTrigger inside it. In the provided code example you can see the amimation I have created. My main question is this : I want the #hand and gloves parts to finish faster than the other parts of animation. However since the scrollTrigger speed attached to end property, how can I adjust the speed of the hand and gloves parts without breaking the timeline

gsap.registerPlugin(ScrollTrigger);

 

var animation = gsap.timeline({

    scrollTrigger: {

        trigger: ".background",

        markers: true,

        start: "10px top",

        end: "+=600% top",

        scrub: 1,

        pin: true,

        toggleActions: "restart none none none"

    }

});

 

 

animation.to(".dark", { opacity: 0 })

  .to("#myRect", { x: 2000 }, "startWallAnimations")

  .to(".second-circle", { rotation: -30, transformOrigin: "center center" }, "startWallAnimations")

  .to(".first-circle", { rotation: 60, transformOrigin: "center center" }, "startWallAnimations")

  .addLabel("startWallAnimations")

  .to(".wall-first", { x: -2000 }, "startWallAnimations")

  .to(".wall-second", { x: 2000 }, "startWallAnimations")

  .to("#hand",{x:-1250,y:85})

  .to("#glove", { y: 10, transformOrigin: "center center", rotation: -2 }, "startHandAndGloveAnimations_2") 

  .to("#hand", { x: -1050, y: 85, transformOrigin: "top right", rotation: 0 }, "startHandAndGloveAnimations_2") 

  .to("#glove", { y: -20, transformOrigin: "top right", rotation: 2 }, "startHandAndGloveAnimations")  //This part should play faster than the other ones

  .to("#hand", { x: -1050, y: 95, transformOrigin: "top right", rotation: 2 }, "startHandAndGloveAnimations") //This part should play faster than the other ones

  .to("#glove", {x:1300}, "startHandAndGauntletAnimations_3") 

  .to("#hand", { x: 400, }, "startHandAndGauntletAnimations_3") 

 

[mvaneijgen]

Hi @xlr8_ion welcome to the forum!

 

You can give the tweens you want to finish faster a property called duration. By default each tween has a duration of 0.5 sections, but setting the property your self to something like duration: 0.25, will decrease the duration. 

 

Hope that fixes your issue, if not please include a minimal demo with your setup, so that we can take a look at your full code. Happy tweening!

[xlr8_ion]

I thought so much that I couldn't see the solution right in front of me. Thanks man.