Scroll Smoother Effects Targets "Jump" on Effects=True

[Windpixel]

When Scroll Smoother effects = true, it sets up all the images for parallax, this causes a "visible jump" (transform translateY XX) which is a problem when content is above the fold.

To demonstrate my issue, I have created a simple Codepen which turns on scroll smoother on dom load, but lets you click a button to trigger the effects on the hero background image which I want to have move in a parallax fashion (parent div, overflow=hidden).

What is best practice is this situation? should I pre-apply some transforms/sizing?

Also, hiding the element until the effects have been applied isn't an option as I am using Nuxt3 Page transitions where the new page enters the dom, old one gets removed, then Scroll Smoother Initialises, the background image needs to be visible the entire time.

Thanks in Advance



 

See the Pen LYaYbeK by windpixel (@windpixel) on CodePen

[Rodrigo]

Hi,

 

This is mostly about how the speed configuration works. From the ScrollSmoother docs:

 

Add a parallax effect by defining a data-speed attribute on any element, like data-speed="0.5" would make that element "scroll" at half-speed while it's in the viewport. It arrives at its normal position in the document flow when it's centered vertically, as shown in this demo by @Carl

See the Pen vYjrKWX by snorkltv (@snorkltv) on CodePen

 

So if you apply the values, ScrollSmoother has to make those changes and, if you already passed the point where the there might still be a jump because of that and setting things to it's normal position checking the scroll position.

 

I've been fiddling a bit with your demo and I can't seem to find a way to prevent said jump to be honest. I'll keep looking and get back if I come across anything.

 

Happy Tweening!

[GreenSock]

I see the issue - you just need a ScrollTrigger.refresh() when you call it in a delayed fashion like that. The refresh() happens automatically if the effects get created within the first 2 ticks of the page loading. 

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

 

But I'll add code to the next release to sense that condition and do the refresh() automatically. Here's a preview of that next release with the code in there (trial version, only usable on CodePen/Stackblitz/local): 

https://assets.codepen.io/16327/ScrollSmoother.min.js 

 

Does that clear things up? Sorry about the confusion there. 

[Windpixel]

16 hours ago, GreenSock said:

I see the issue - you just need a ScrollTrigger.refresh() when you call it in a delayed fashion like that. The refresh() happens automatically if the effects get created within the first 2 ticks of the page loading. 

 

But I'll add code to the next release to sense that condition and do the refresh() automatically. Here's a preview of that next release with the code in there (trial version, only usable on CodePen/Stackblitz/local): 

https://assets.codepen.io/16327/ScrollSmoother.min.js 

 

Does that clear things up? Sorry about the confusion there. 

Thanks, yes makes sense. I have been working on some Nuxt3 page transitions and tracked this jump down to the effects=true, when I do a delayed scroll smoother initialisation. I will take this back into the there and see if this solves it

 

Many thanks