Jump to content
Search Community

SmoothScroller ignoreMobileResize for non-touch devices

Fabian W test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi,

 

We would need an option to ignoreMobileResize also for non-touch devices.

Is this possible?

 

Reproduction:

The demo simulates a the combination of SmoothScroller, ScrollTrigger and lazy loaded images. The only purpose of the onLeave method is to load the image while a scrub is taking place, it's not part of the actual problem. When scrolling down one can see the blue box animating -200px on y-Axis with a ScrollTrigger and scrub. This blue box is jumping to the beginning of the animation the moment the image is loaded.

 

A lazy loading image may be a layout shift if the height and width of the image tag is not matching the actual size. This can happen if some odd formats like 16:9 get rounded. The difference is mostly between 1 and 2 px. 

But these 1-2px still are a layout shift and force the SmoothScroller to do a refresh().

A refresh() then forces the scrub animation of a ScrollTrigger to reset.

This causes the element to jump.

 

On mobile we have the ignoreMobileResize config. We would need something like this for desktop.

So if these little layout shifts happen the SmoothScroller does not refresh().

 

Best,
F

 

 

See the Pen GRBBdmq by anothercodepen (@anothercodepen) on CodePen

Link to comment
Share on other sites

I'm a little fuzzy on what you're asking here...

Some tips that will increase your chance of getting a solid answer:

 

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • A very clear minimal demo that illustrates the issue

 

By the way, it's generally a very bad idea to do lazy loading in ways that will cause layout shift. I'd recommend setting a width/height on the elements that are loading dynamically so that there's no layout shift.

Link to comment
Share on other sites

6 hours ago, GSAP Helper said:

I'm a little fuzzy on what you're asking here...

Some tips that will increase your chance of getting a solid answer:

 

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • A very clear minimal demo that illustrates the issue

 

By the way, it's generally a very bad idea to do lazy loading in ways that will cause layout shift. I'd recommend setting a width/height on the elements that are loading dynamically so that there's no layout shift.

Sorry, yes it was not well written. I updated the original post with a new demo and a more precise formulation. Let me know if it's still hard to understand.

Link to comment
Share on other sites

I'm still pretty fuzzy. I opened your demo and scrolled/refreshed at least 20 times and couldn't notice a problem. I'm sure I'm missing something obvious.

 

Are you saying you want a way to prevent the ResizeObserver from kicking in when the ScrollSmoother's content resizes? If so, try setting autoResize: false on your ScrollSmoother's config object. Perhaps I'm misunderstanding what you're asking, though. It'd probably help if you were very explicit about reproducing the problem, like "scroll down to where the blue <div> starts animating in and then you'll see that it jumps...I want it to be perfectly smooth even though I know that the DOM had to reflow, triggering a refresh() and I'm okay with all the measurements being inaccurate due to skipping the refresh()"

Link to comment
Share on other sites

Maybe it does not show up on your screen.

I made a little video where you can see the blue box jumping after a layout shift.

https://www.dropbox.com/s/dm2ebo622ucs93m/230130--Kapture 2023-01-30 at 09.34.57.mp4?dl=0

 

Yes, i would like to skip the refresh() if the layout shift is only x% of the viewport.

 

Regarding autoResize: Can you point me to the docs? I cannot find it there...

Link to comment
Share on other sites

11 hours ago, Fabian W said:

Regarding autoResize: Can you point me to the docs? I cannot find it there...

It is intentionally undocumented right now. Please just try it and let me know if it resolves anything for you. :)

 

I watched your video and I cannot reproduce that behavior at all. :( I wonder if there's some secret I'm missing. 

 

Link to comment
Share on other sites

On 1/30/2023 at 9:29 PM, GreenSock said:

It is intentionally undocumented right now. Please just try it and let me know if it resolves anything for you. :)

 

I watched your video and I cannot reproduce that behavior at all. :( I wonder if there's some secret I'm missing. 

 

I also tried in on different Browsers and it seems to work on Firefox.

Chrome and Safari are having the behavior.

Which browser are you using?

Also, do you have the debug console open and cache deactivated?

autoResize: false seems to work.

BUT now I have to build a resize -> refresh system for the whole website (e.g. we have accordions)

 

an option to have a threshold for when the refresh happens would be great.

is that possible?

Link to comment
Share on other sites

  • Solution
8 hours ago, Fabian W said:

Which browser are you using?

Chrome and Safari. 

 

8 hours ago, Fabian W said:

Also, do you have the debug console open and cache deactivated?

Yes, I disabled cache.

 

After several hours of digging, I think I figured out what was causing that issue in your scenario and I don't think there's a need to add a feature like "don't refresh unless the size changes more than ___". Please try the beta version of the upcoming release (on CodePen/CodeSandbox/Stackblitz only):

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

 

(you probably need to clear your cache)

 

Does that work better for you? 

  • Like 2
Link to comment
Share on other sites

It was a very deep edge case related to rendering a scrubbed animation during a refresh. It'd actually take a really long time to explain all the logic, but it was tricky to track down. Glad to hear it resolved things for you. As for when we'll publish, I can't guarantee anything at this point but you are welcome to use the beta version in the meantime. I can get you a non-trial version if you'd like (since you're a Club GreenSock member - 💚

  • Like 1
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...