JoeH

Thanks. I will check that out, I made it like that because in the dribble example I posted I noticed that the stroke always animates in the direction of the rotation, I couldn't think of any other way to do it. My finished animation has 2 rotations, and then each 3 parts are animated also. I'm sure I can do this with less code, but wanted to get it close to the Dribble example first, maybe the stroke animation can be done with one function, passing it the element and the starting position. https://codepen.io/orionJoe/pen/yLqZwJE?editors=1010

Hi! hope you are all well. I'm creating a loading animation with an SVG. I have 1 of my 3 lines animating as shown in my codepen, my only slight issue is that when the loop goes from the last step to the first step the stroke jumps slightly, it's only subtle but I wanted to iron this out if possible. Also, am I right in thinking that I can't have more than one stroke animating on the same element? Basically I am creating something close to this -> https://dribbble.com/shots/5095383-Loader-Animation/attachments/10738727?mode=media What I have thought about doing is having 3 SVG eclipses in the same position, 1 for each of the 3 lines.

Thanks, this works great for me.

Yes no problem, I'll set it up this weekend.

I think I have found a workaround, we have a deadline soon so need to move fast on this, so we are just looking for a solution, I can then help after our deadline to try find the cause of this bug. If I add smoothTouch: 0.1 it seems to be a workaround. Can we use a smaller number than 0.1 because we prefer no change on touch screen devices?

The strange thing is that - window.scrollTo(0, 11120) seems to be the bottom of the page.

The behaviour is very strange, I get different results which seem random. I've just logged out each of the above and they are as follows: ScrollTrigger.maxScroll(window) = 11151 document.documentElement.scrollHeight = 12578 (document.body.scrollHeight) - (window.innerHeight) = 11151 document.documentElement.clientHeight = 1166 document.body.clientHeight = 12578

Removing normalizeScroll: true seems to fix the problem. However it breaks some scrollTriggers and Pins seem to go out of whack. No difference when removing ignoreMobileResize: true ScrollTrigger.maxScroll(window) is the same with ScrollSmoother enabled/disabled. window.scrollTo(0, VALUE) does NOT go to the end of the page

Here is my initiation: var smoother = ScrollSmoother.create({ smooth: 4, effects: true, normalizeScroll: true, ignoreMobileResize: true }) This problem is happening in browsers in which the address bar is always visible. Tried running ScrollTrigger.refresh() on a 1 second interval and that didn't help. It's going to take me a while to get a codepen setup I think, this issue only exists on one page on our website: I've tested it isn't related to the length of the page, I've removed all other JS unique to the problem page, this doesn't make any difference, and even removed individual sections from the problem page to see if they are causing the issue, in this case the gap at the bottom of the page between the end scroll position and the end of the page just gets smaller and smaller as more sections are removed. I've tried removing all the CSS from the problem page also and this doesn't help either, still unable to pinpoint where the issue is coming from.

Hi. In answer to your questions. 1. No 2. No 3. How can I do this please? I have run a setInterval function logging out -> window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop But when I scroll to the end the value is significantly less than document.documentElement.scrollHeight or document.body.scrollHeight, but not sure if I am comparing the correct things here. Some other observations: I can replicate the issue in my browser if I 'toggle device toolbar' i.e. inspect element and click on the mobile devices icon so that the touch screen mode is simulated. But as soon as I click anywhere on the page (at which touch-action: pan-x; is removed from body) and then try to scroll again, I am able to scroll to the appropriate position on the page.

Will try replicate in a codepen. Those 2 values are always the same when we have tested.

This issue is only affecting some devices, the ones we have found that have an issue are Samsung S22 Ultra using Chrome browser, Samsung browser and Firefox, and using an Amazon fire tablet with the Silk browser. The scrollbar does not reach the bottom of the page, not sure if this helps or not in diagnosing the issue, but the scroll bar will not move once it gets to a certain point (around 7/8 of the way down the page on this particular webpage), the point it reaches also changes if you refresh, allowing you to scroll slightly further. I have tried creating the smoother instance once the entire page has loaded and even adding a setTimeout function, but this does not work, and seems to break the pins and scroll triggers. I don't have a codepen although I can try set one up, or I can provide a link to the website in which it is happening on, but would prefer to not share this in public. Attached is a video showing the issue on mobile zzscrollsmoothissue-unbvedcq_W2YJTs12.mp4

Just noticed that it works with iframes too, what kind of wizardry did that involve?

Check out this question of mine where 2 methods of adding to React are provided. The solution from @OSUblake using contexts is the better one because it will allow children of page components to access the ScrollSmoother instance.

Yes I do wish for this. I think where it may not be desirable for some websites is on a refresh of a page where it is normal for the scroll position to persist.