How to slow down scrollTrigger Animation

[Giovanni Ciriello 0 Likes (Newbie)]

Hi. I'm really enjoying GSAP animation but I'm having some troubles with scrollTrigger.
In general I didn't understand how to "control" the time of animation based on the quantity of scroll of the user.

Is it possible?

[Shaun Gorneau 2,017 Likes (Superhero)]

There's a few ways you can do it ...

 

If part of a timeline, give that tween a longer duration. You could also affect the timescale ... but, without more information, I think a longer duration would be a better fit. Another option is to define an end value that is over a large pixel (or a calculated) value.

[Giovanni Ciriello 0 Likes (Newbie)]

14 minutes ago, Shaun Gorneau said:

There's a few ways you can do it ...

 

If part of a timeline, give that tween a longer duration. You could also affect the timescale ... but, without more information, I think a longer duration would be a better fit. Another option is to define an end value that is over a large pixel (or a calculated) value.

OK maybe a code snipped would help..
 

    gsap.timeline({
      scrollTrigger: {
        trigger: this.aperitifSection.nativeElement,
        scrub: true,
        pin: true
      }
    })
      .to(this.aperitifBg.nativeElement, { opacity: 1 }) // <!-- this is an animated background. After this I want the user scroll enjoing for some time this animation
      .to(this.aperitifImg.nativeElement, { top: "100vh" })

how could I modify the code?

[_Greg _ 123 Likes (Specialist)]

Hi! if i understand you, you want change opacity from 100 to 0 when scroll from 0 to 100vh? 

speed = distance / time

You can't change time of scrolling but you can change distance

 

[Giovanni Ciriello 0 Likes (Newbie)]

11 minutes ago, _Greg _ said:

Hi! if i understand you, you want change opacity from 100 to 0 when scroll from 0 to 100vh? 

speed = distance / time

You can't change time of scrolling but you can change distance

 

The opacity goes to 0 to 1. I just want that, after this animation, further scrolling does not start the following animation soon, but after a bit of scrolling.

[GreenSock 16,240 Likes (Superhero)]

Once we see a minimal demo, I'm sure we'll be able to offer some advice. It's just tough to understand exactly what you're trying to do by looking at a tiny piece of the code. 

 

If you're saying that you want there to be a gap between when aperitifBg fades in and when aperitifImg animates to top: "100vh", you can simply use the position parameter to add some space, like "+=5" for example.