Jump to content
Search Community

How to slow down scrollTrigger Animation

Giovanni Ciriello test
Moderator Tag

Recommended Posts

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 comment
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 comment
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 comment
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 comment
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.
×
×
  • Create New...