gsap.fromTo set duration is not working

[Mizu]

Hi Guys

Im working on a horizontal scrolling example. 

Unfortunately the duration property does not work, the animation is still too fast. 

    this.horizontalScroll = gsap.fromTo(this.slider, {
      x: () => 0,
    }, {
      x: () => transformedValue,
      ease: 'circ',
      duration: 0.1,
      scrollTrigger: {
        trigger: this.$el,
        pin: this.$el,
        invalidateOnRefresh: true,
        scrub: true,
        allowAnimation: false,
        anticipatePin: 1,
        // markers: true,
      },
    });

Thanks so much for every hint! 

 

Best

Michelle

See the Pen xxpvELK by Mizu_ (@Mizu_) on CodePen

[akapowl]

Hello @Mizu - welcome to the GreenSock forums.

 

Durations on scrubbing ScrollTriggered tweens do work a bit different from regular timebased tweens.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

Since the fake-horizontal-scrolling ScrollTriggers only consist of one tween, which will be spread out between start and end of the ScrollTrigger,  changing the duration in this example doesn't really do anything. If you want the fake-horizontal scrolling to feel slower, you will need to adjust the end of the ScrollTrigger - I set it to "+=25000px" here to show the difference it makes.

 

See the Pen JjpLBdW by akapowl (@akapowl) on CodePen

 

[Mizu]

Dear @akapowl

This works quite fine, thank u so much!!!!! 🙏

But the start is still a little bit fast (almost jumpy a little bit). Du you recommend any other solutions instead gsap.fromTo(...) to achieve a fake horizontal scrolling effect? Maybe with different tweens? 

 

[akapowl]

 

I'm not sure I'm following.

 

Since the tween has an ease of  'none' set, the fake-horizontal scrolling moves at a constant/linear rate.

 

I don't see the start being faster than the rest.

 

Could you maybe elaborate a bit on what you mean by that?

 

[Mizu]

Hi @akapowl

I tweeked the easing a little bit and now it is perfect! Thank u so much for your support! 

[akapowl]

 

Awesome, good to hear you've got it running as you like!  

 

Happy tweening!