Jump to content
Search Community

How to add smoothness to elements when scrolling?

mb38 test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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?

  • Like 4
Link to comment
Share on other sites



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:



Happy Tweening!

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