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.

I am not using Next.js. Although I guess your method could be used still by creating a custom component for links which uses the Link component, and looks for the scroll value.

Hi, The issue is when navigating between pages/routes in React, if you for instance click an internal link, then when you arrive on the next page, the scroll position that you were in when you click the link has persisted. On the current site I am working on I am not too fussed if the page always loads at the top no matter what, so I have just added: useEffect(() => { smoother.scrollTop(0) }, []); On every page component. However if this is not desirable I was wondering what the proper or best way of dealing with this issue might be.

Thanks for this, I'm still rather new with React so haven't done more than some brief reading up on context, I'm going to take a deeper look at it then re-review your code. I can think of a messy way to communicate back from the child component to then run the get method but hardly ideal.

Ok I seem to have fixed this actually, I was previously creating the ScrollSmoother instance in App.js, but I think this was running too early I moved the initiation of ScrollSmoother to its own component: import React, {useRef, useEffect} from "react"; import {gsap} from "gsap"; import ScrollSmoother from "gsap/dist/ScrollSmoother"; export default function useScrollSmoother() { gsap.registerPlugin(ScrollSmoother); var smoother = useRef(null); useEffect(() => { smoother.current = ScrollSmoother.create({ smooth: 4, effects: true }) }, []) return {smoother} } And then in the page component use: const {smoother} = useScrollSmoother({}); You can then add effects for that page like: useEffect(() => { smoother.current.effects("img", { speed: "auto" }); }, []); Sorry for spamming up the forum!

I'll setup a code sandbox!

Wow great plugin and perfect timing for a project I am working on, blows Locomotive scroll out the water! I have got it working great in React apart from when I navigate between routes (react-router-dom), the parallax effects don't seem to initiate. Works fine when I refresh the page. The ScrollSmoother effect works fine in this regard. Does some kind of refresh need to be run possibly? Thanks

OMG looks amazeballs!

I'm working in React so this issue is gonna take me a while to replicate in codesandbox. I've been banging my head against the wall with this for hours, I can't get a pin to work, one strange thing about it is that the "Scroller start" and "Scroller end" markers are not transforming, when I scroll the page they move with it rather than remaining in a fixed position due to the transform css applied to them. There is a pin-spacer element being wrapped around the trigger correctly but like I said, nothing else is working, no transforms are being applied. I was hoping that someone might no an obvious reason why this might happen? If not I will create a codesandbox.

Thank you @Cassie and @akapowl this was a great help.

Sorry yes. Here is my forked version. As you can see if you immediately click the first section it works as it should. Click any other section and it expands, but I'm not sure how to animate it to be centered. https://codepen.io/orionJoe/pen/xxpqYOY