Sections are jumping unevenly with the data-lag attribute

[matashaEs]

Hello🙃

 

I'm a Club Greensock Member and am using ScrollSmoother in my project. 

I added a data-lag attribute to each section for smooth page scrolling. You can see on the codepen that sections are jumping unevenly, the blue background is visible during scrolling. Can this be fixed with "Easing" or some other way?

 

I also add a video, because this bug is not always shown.

 

Thank you in advance

 

See the Pen OJEVLRg by matashaEs (@matashaEs) on CodePen

[Rodrigo]

Hi,

 

The problem I'm seeing is regarding the lag value you're applying which is causing a tiny space (seems like 1 pixel) between sections. Maybe this is an issue or not, I couldn't tell you. I'll ping @GreenSock so he can tell us what's going on here.

 

In the mean time adding some extra space at the bottom using CSS seems to avoid the problem:

.white-section {
  background-color: #456456;
  height: 400px;
  z-index: 5;
  position: relative;
  width: 100%;
}
/* Apply an extra 2px to all elements except the last */
.white-section:not(:last-child) {
  height: 402px;
  margin-bottom: -2px;
  padding-bottom: 2px;
}

I know is not a solution but more of a hack, but even the smallest lag value causes that 1px space between sections to appear. Like I said maybe is supposed to be like this, because the way ScrollSmoother works, so hopefully Jack could clarify that for us.

 

Happy Tweening!

[GreenSock]

As stated in your other [duplicate] post...

 

The problem here is that the lag effect ScrollTriggers take effect the moment the natural position of the element enters the viewport, and they stop the moment the natural position of the element leaves the viewport (though the animation that returns it to its natural position keeps going until it completes, as it should). You created a situation where the natural position of one element exited while another is still active and could be affected by the scrolling motion inertia. 

 

One way to solve it is to force the effect ScrollTriggers to expand such that their start/end values trigger earlier/later. Here's how you could do that: 

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

 

I'm adding 600px of effect "padding", but you can adjust it to whatever you need. 

 

Does that help?