Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Giovanni Ciriello

How to slow down scrollTrigger Animation

Recommended Posts

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?

Link to post
Share on other sites

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.

  • Like 5
Link to post
Share on other sites
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?

Link to post
Share on other sites

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

 

  • Like 1
Link to post
Share on other sites
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.

Link to post
Share on other sites

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. 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×