Jump to content
Search Community

I want the scrolling to be slowed in order to make animation last long

IbraheemHaseeb test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi there,

 

So I have this code up there you can see and I want my scrub animation to go slowly rather than it being dependent on the scrolling speed. Yes, I know about giving value of scrub:1, but that just makes it smooth not slow. I want it to go slowly in order to make this animation last long.

 

// ignore the css and images as they are just for demonstration here. The original thing is different. 

See the Pen wvgQBdx?editors=0110 by ibraheemhaseeb7 (@ibraheemhaseeb7) on CodePen

Link to comment
Share on other sites

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

 

When you have "scrub" enabled, it must fit the whole animation between the "start" and "end" values, so the solution is to simply push your "end" further down the page. You can use a relative value if you prefer, like end: "+=2000" for example. 

 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

I'm curious about what you're defining as "go slower". Do you want the tweens to happen once the ScrollTrigger start point has been met, but the tweens themselves to be independent of any scroll action? Or do you want to "take over scrolling" in such a way that no matter the user's scroll velocity, you're putting a maximum velocity in place?

  • Like 2
Link to comment
Share on other sites

3 hours ago, GreenSock said:

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

 

When you have "scrub" enabled, it must fit the whole animation between the "start" and "end" values, so the solution is to simply push your "end" further down the page. You can use a relative value if you prefer, like end: "+=2000" for example. 

 

Happy tweening!

I can extend the end value to delay it or lower the start value but that just makes the animation start a little early. I want it to start at the defined time but scalling to go slowly

Link to comment
Share on other sites

2 hours ago, Shaun Gorneau said:

I'm curious about what you're defining as "go slower". Do you want the tweens to happen once the ScrollTrigger start point has been met, but the tweens themselves to be independent of any scroll action? Or do you want to "take over scrolling" in such a way that no matter the user's scroll velocity, you're putting a maximum velocity in place?

Yes somehow if its possible to take over the velocity I would like that. Or is there a way that once my first zoom-in is done I make it pin and that pin last for some scrolling and then the rest of the zoom-out continues from that exact point.

Link to comment
Share on other sites

  • Solution

I'm not sure if this is what you're looking for, but here's a fork:

See the Pen e19f084fd3ab700c919cdc850cece646?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Notes:

  1. You were loading a very old version 2 TimelineMax file - don't do that :)
  2. I'd use a timeline to animate things in the proper order, and just hook that up to a ScrollTrigger that pins the element for however long you want.
  3. Don't use CSS scroll-behavior: smooth. It messes things up. 
  4. Don't set overflow-x: hidden on the html and body - just do it on the body. 
  5. By default, ScrollTrigger doesn't add pinSpacing when the parent is display: flex because that's typically what people want. You can set it to true to force it. 
  6. I would strongly recommend setting all your transforms via GSAP, not just in CSS. It looks like you're doing that with a LOT of the text things. 
  • Thanks 1
Link to comment
Share on other sites

2 minutes ago, GreenSock said:

I'm not sure if this is what you're looking for, but here's a fork:

 

 

 

Notes:

  1. You were loading a very old version 2 TimelineMax file - don't do that :)
  2. I'd use a timeline to animate things in the proper order, and just hook that up to a ScrollTrigger that pins the element for however long you want.
  3. Don't use CSS scroll-behavior: smooth. It messes things up. 
  4. Don't set overflow-x: hidden on the html and body - just do it on the body. 
  5. By default, ScrollTrigger doesn't add pinSpacing when the parent is display: flex because that's typically what people want. You can set it to true to force it. 
  6. I would strongly recommend setting all your transforms via GSAP, not just in CSS. It looks like you're doing that with a LOT of the text things. 

 

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...