Jump to content
Search Community

How to slow down the scrollTrigger Animation

imjs test
Moderator Tag

Recommended Posts

I want to slow down the speed of equation elements ('methods', '+',  etc) coming into their final position. I tried changing the duration and y values, they have no impact. If I change the markers start and ending position. The final image will then clash into the section that comes after. Any suggestions?
 

See the Pen VwaPROm?editors=0010 by imjs (@imjs) on CodePen

Link to comment
Share on other sites

Hi @imjs :)

 

Welcome to the forum.

 

I assume you'd like the elements to animate over the same duration as the opacity tween, right. The problem is you've set the opacity tween to DUR * 5 which in this case is 5 seconds. The elements have the default of 0.5 so they complete before the opacity tween. You'd want that timeline to have the same duration as the opacity tween. I switched your timeline a little bit to use a stagger. We can then set the amount of the stagger to match the opacity tween.

 

Here's a fork of your demo with those changes. 

See the Pen 7c90e3f13788e220763de534e0925d8d by PointC (@PointC) on CodePen

 

Note: you can give all those targets a common class and target them that way instead of an array of IDs. I also only changed the animation for window widths > 600. You'll need to adjust the other one. 

 

Hopefully that helps.

 

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

Hi @PointC,

Thanks for your reply and the tips.  Thanks for fixing the duration.
The issue I intended (sorry it was not clear) to fix is...how to make the scroll "harder" . Now, the whole animation speed is depending on how fast I scroll. The faster I scroll, the faster the animation ends. And with a normal user's scrolling speed, the animation ends quickly.
I want to slow down that scrolling speed. You almost have to work for it, (like you have to scroll two strokes to make the element move a bit), really scroll a lot to make the elements of the equation come to their final position. 
It is a bit hard to explain, sorry about that. A good reference would be typeform.com on the scrolling speed.

Link to comment
Share on other sites

If you don't want the animation to be based on the scroll speed then you wouldn't need to set scrub:true. You could use any duration you like in the tweens and they would just play at their normal speed once you hit the trigger. Is that more what you wanted?

  • Like 2
Link to comment
Share on other sites

 

Hey @imjs

 

You could adjust the end of your trigger there, maybe to something like

 

    end: "+=" + (window.innerHeight * 2)

 

and accordingly set the height of the #wrapper that is being pinned, so it fits the adjusted 'duration' of that pin.

 

Is this what you were thinking of?

 

See the Pen 316fc300e313a57ffda7b23db66d1c53 by akapowl (@akapowl) on CodePen

 

 

Here's one little more 'aggressive example of that:

 

See the Pen 5dcacdc8264a28c899b4d4c26e297ed4 by akapowl (@akapowl) on CodePen

 

 

 

Edit:

I also added 

anticipatePin: true,

to your ScrollTrigger because I was experiencing some flickering issues onEnter and onEnterBack.

 

 

 

Edit 2:

And if you wanted to smoothen out the animation of the text-bits a little, you could of course just set scrub to 1, instead of true

scrub: 1

 

 

 

Cheers,

Paul

  • Like 6
Link to comment
Share on other sites

 

What might be even better, though, is setting the pin to

 

pin: "#wrapper"

 

so the pinSpacing, ScrollTrigger applies automatically, is being applied to that div accordingly.

 

This way you could keep the height of your #wrapper set to 100vh in your CSS and simply just play around with the end of your ScrollTrigger without having to care about setting the right height in your CSS.

 

See this pen:

 

See the Pen 975a831b48fc012ff08dcd060818ec05 by akapowl (@akapowl) on CodePen

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

  • 4 months later...
On 8/27/2020 at 2:23 AM, akapowl said:

 

What might be even better, though, is setting the pin to

 



pin: "#wrapper"

 

so the pinSpacing, ScrollTrigger applies automatically, is being applied to that div accordingly.

 

This way you could keep the height of your #wrapper set to 100vh in your CSS and simply just play around with the end of your ScrollTrigger without having to care about setting the right height in your CSS.

 

See this pen:

 

 

 

 

I just created an account to thank you for this! @akapowl

  • Like 1
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...