How to add smoothness to elements when scrolling?

[mb38 0 Likes (Newbie)]

Hello, I just can’t figure out how to set up a smooth sliding of the title (targetTitle) and colored blocks (targetImg, targetImg2). When scrolling through the page, they move very quickly. I've experimented with the duration parameter, but it doesn't give any results. I tried to add ScrollSmoother, the page began to scroll smoothly, but this did not affect the block (target). I don't understand what I'm doing wrong.
And for some reason, the marker end: 'bottom bottom' does not reach the bottom of the block (target).
Can someone explain why this is happening and how to add smoothness to the elements?

See the Pen vYzwVdB by mb38zero (@mb38zero) on CodePen

[mvaneijgen 2,518 Likes (Superhero)]

Hi @mb38 welcome to the forum!

 

10 minutes ago, mb38 said:

I've experimented with the duration parameter

 

Ha, that is a logical place to start, but is a mistake we all made when starting out with ScrollTrigger. ScrollTrigger converts the total duration of your animation to the scroll distance, so the duration kinda gets thrown out of the window when adding ScrollTrigger (not really it still matters how long something takes relative to something else)

 

There is a great video about this on the Greensock YouTube channel, check it out!

 

When adding scrub: true to a ScrollTrigger most of the time you want to set the easing of all animations to ease: 'none', because it feels weird when scrolling that it doesn't have a linear motion, but this is not always the case, try experimenting with it.

 

I've added some comments to the code to better explain what certain properties do, be sure to read through them. Hope it helps and happy tweening! 

See the Pen LYJoqvK?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

21 minutes ago, mb38 said:

And for some reason, the marker end: 'bottom bottom' does not reach the bottom of the block (target).

I've set the height to 100vh, does that fix your issue?

[mb38 0 Likes (Newbie)]

Thanks a lot for the comments on the code. I couldn't figure out how bottom+=5000px works, but now it's clearer to me.

[Rodrigo 5,907 Likes (Superhero)]

Hi,

 

scrollTrigger: {
   trigger: targetEl,
   start: 'top top',
   end: 'bottom+=5000px bottom', // Increase the scroll distance
   scrub: true,
   pin: true,
   pinSpacing: true,
   markers: true,
 },

In this case Mitchel's code is saying, end the animation when the point where the bottom of the trigger is, plus 5000 pixels, hits the bottom of the viewport. So basically is close to say when the bottom of the trigger hits the bottom of the viewport, but 5000 pixels down. Since pin is set to true, ScrollTrigger will add that extra scrolling distance for you so you don't have to worry about that.

 

Hopefully this clear things up. If you keep having doubts hit the ScrollTrigger docs:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Happy Tweening!