Smoothscroller effect after certain scrolling position, not before

[Moritz Profitlich]

Hello

I am looking for a way to accelerate objects after they passed a certain point on the viewport. Just like smootherscroll’s data-speed but without change in speed before the certain point.  The objects should scroll with normal speed before.

 

That’s what I want to achieve: Images or groups of images scroll in natural speed. They are accompanied by text. Both should scroll in normal speed. At the center of the screen, the title is pinned. Now, after the pin is released, the text should accelerate, as if it wanted to catch up with the image it belongs to.

 

In other words: Until the pin I want the behaviour I get without Smoothscroller, after the pin I want the behaviour with Smoothscroller.

 

In the pen you can see that the text very well runs after the image but you can also see that it already runs ahead of the image before it gets pinned. The latter it should not do.

 

Thanks for your ideas!
Moritz

 

When the text is not pinned anymore it should catch up with the image(s). I could get the effect with SmootherScroll but that slows down the text until the center of the screen.

 

 

Is

See the Pen jOQmGLP by mprofitl (@mprofitl) on CodePen

[Cassie]

Hiya!

 

Thanks for the clear demo and explanation! (and for supporting club GreenSock!)

 

Something like this maybe? Use a standalone scrolltrigger to pin and then a tween afterwards to move the text?

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

[Moritz Profitlich]

Hi Superhero Cassie

 

That’s what I am looking for! Your demo is to the point.

 

I implemented your code into mine and my page still behaved as before. Very strange. Only after deleting the let smoother I got the desired result. I also tried to delete it from your code and find that your code also works without it (only that it also works with it).

 

Question 1: Do I assume right that ScrollSmoother is not needed as the acceleration of h2 is done by a gsap.to animation?

Question 2: If (1) is yes why does your demo also work with ScrollSmoother? Why doesn’t it interfere?

 

Now that I saw the animation, I whished for an addition. I wanted to slow down the red-framed text blocks before they get pinned. A slow halt instead of a hard stop. So I did. You can see the result here: https://staging.profitlich.ch/projekte (from July 15th on: https://profitlich.ch/projekte)

 

 

[Rodrigo]

Hi

 

53 minutes ago, Moritz Profitlich said:

I implemented your code into mine and my page still behaved as before. Very strange. Only after deleting the let smoother I got the desired result. I also tried to delete it from your code and find that your code also works without it (only that it also works with it).

 

Question 1: Do I assume right that ScrollSmoother is not needed as the acceleration of h2 is done by a gsap.to animation?

Question 2: If (1) is yes why does your demo also work with ScrollSmoother? Why doesn’t it interfere?

This is a bit weird. Storing the ScrollSmoother instance is just a convenience in case you need to access any method/property of said instance later in your code and if you create that variable/constant shouldn't make any difference whatsoever, that's why Cassie's code works the same with or without it. My best guess is that something else is messing with your setup.

 

Also I peeked a bit under the hood of your site and I think the current way you have for your mouse-follow element is not the best approach. I'd strongly recommend you using GSAP QuickTo for this:

https://greensock.com/docs/v3/GSAP/gsap.quickTo()

 

Here is an example:

See the Pen xxpbORN by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Moritz Profitlich]

Thanks, Rodrigo, especially for the hint on the better way to implement a mouse-move. We will change it.