Krix Posted June 26, 2023 Share Posted June 26, 2023 My case is when the user scrolls the first time, no matter whether short or long, the animation must be finished. And revert the animation when going backward. But somehow when I scroll hard, the heading is lagging. You can test it on a mobile device and see the difference. video: https://drive.google.com/file/d/17V6gMXfMVGqWCzZppKC5TwgKmZBSbC_g/view?usp=drivesdk Codesanbox link: https://codesandbox.io/p/sandbox/charming-hill-ss2m8s Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted June 26, 2023 Solution Share Posted June 26, 2023 Hi, This seems more related to the way touch devices handle scroll. Try using normalizeScroll and see how it goes: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); ScrollTrigger.normalizeScroll(true); Also you could try a more specific snap configuration in your ScrollTrigger instance (scroll down until the snap section and see the object configuration). Basically you want to snap to an array of values [0, 1] so it goes to the start or end point of the ScrollTrigger instance: https://greensock.com/docs/v3/Plugins/ScrollTrigger Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Krix Posted June 27, 2023 Author Share Posted June 27, 2023 6 hours ago, Rodrigo said: Hi, This seems more related to the way touch devices handle scroll. Try using normalizeScroll and see how it goes: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); ScrollTrigger.normalizeScroll(true); Also you could try a more specific snap configuration in your ScrollTrigger instance (scroll down until the snap section and see the object configuration). Basically you want to snap to an array of values [0, 1] so it goes to the start or end point of the ScrollTrigger instance: https://greensock.com/docs/v3/Plugins/ScrollTrigger Hopefully this helps. Happy Tweening! Thanks for your response, I tried the snap with values [0,1] but it has a delay time (even though I set the delay time as 0) and it does not scroll immediately. Link to comment Share on other sites More sharing options...
Rodrigo Posted June 27, 2023 Share Posted June 27, 2023 Hi, Did you try normalizeScroll(true)? Link to comment Share on other sites More sharing options...
MakeUp Posted June 27, 2023 Share Posted June 27, 2023 Hi, try setting will-change: transform on the CSS of your moving elements Link to comment Share on other sites More sharing options...
Krix Posted June 28, 2023 Author Share Posted June 28, 2023 18 hours ago, Rodrigo said: Hi, Did you try normalizeScroll(true)? Sorry for my late response, the normalizeScroll reduces lagging animation. Link to comment Share on other sites More sharing options...
Krix Posted June 28, 2023 Author Share Posted June 28, 2023 18 hours ago, MakeUp said: Hi, try setting will-change: transform on the CSS of your moving elements Do you mean to add that CSS variable to all the elements that have animation? Link to comment Share on other sites More sharing options...
Rodrigo Posted June 28, 2023 Share Posted June 28, 2023 5 hours ago, Krix said: Do you mean to add that CSS variable to all the elements that have animation? At least in the ones that are giving you the most trouble, is worth testing. Happy Tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now