Share Posted June 3, 2020 Hi! First of all - thanks for the wonderfull ScrollTrigger plugin! It's amazing! Now to my issue: When I try to snap on iOS I get some very laggy scrolling - just like back then with this issue: So now I wanted to know if there is a possibility to pass the autoKill attribute to the snapping. I tried to simply use it but wasn't that lucky I'm building something like this: In this codepen it seems to work, but not in my project (I can't see a difference). First I thought it is caused by the scroll-behavior: smooth, but it still happens after I set it back to auto. Any idea what could cause the lag or how to fix this? Thanks, janein See the Pen mdVbobo by team (@team) on CodePen Link to comment Share on other sites More sharing options...
Share Posted June 3, 2020 Hi! Did you check official demo of GreenSock? See the Pen KKpLdWW?editors=0010 by GreenSock (@GreenSock) on CodePen Does it have same lags? On your demo i have lags with scrolling on my PC (Chrome 84.0.4147.30, Win10) but on official demo all working well Link to comment Share on other sites More sharing options...
Share Posted June 3, 2020 I think Nekiy2 meant to post this demo: See the Pen BaowPwo?editors=0100 by GreenSock (@GreenSock) on CodePen Adding will-change: transform to the panel's CSS seems to fix the jank for me. 3 Link to comment Share on other sites More sharing options...
Share Posted June 3, 2020 2 hours ago, janein said: So now I wanted to know if there is a possibility to pass the autoKill attribute to the snapping. Just for the record, there's no need for autoKill - ScrollTrigger automatically does that with snapping. I haven't noticed any jank, but if you're doing any transform-related tweening on scroll, it's a good idea to set force3D: true so that it keeps those things layerized (force3D: "auto" would switch back to 2D when the tween is over which de-layerizes it and that's a GOOD thing in most cases but when you're doing scrolling you want things to be ready to jump back into layerized turbo mode at any moment). Setting will-change: transform also accomplishes that in most browsers, as Zach indicated. 1 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 3, 2020 Thanks for the hints! My lag doesn't act like a "regular" lag which comes from bad performance, but more like the mentioned issues on iOS. On any other device it works just fine. But I will add force3d anyway and test it out tomorrow at the office. (No iOS device nearby) Cheers! Link to comment Share on other sites More sharing options...
Author Share Posted June 4, 2020 Well, I tried force3d and it for sure makes my animation a little bit more performant. But the original problem still exists. Just to be clear: the scrolling-movement itself runs just fine, but during snapping it acts like the animation gets killed after each pixel and starts again. Exactly like I've seen it before with the iOS-autokill-bug. Sidenote: And the original demo doesn't have snapping enabled, that's why I made a fork. Link to comment Share on other sites More sharing options...
Share Posted June 4, 2020 Do you have a demo that clearly shows the odd behavior? I tried it on my iPhone and didn't notice anything really odd. Some of that sluggishness is because you've got scrub set to 1 so it's intentionally taking a second to catch up. I didn't see anything remotely like an autoKill misfiring and ceasing the scroll entirely or something. Maybe I'm missing something. 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 4, 2020 Ok I think I've got the reason why it works on the demo, but not in my project. Seems like the amount of nested DOM elements inside each panel causes the problematic behaviour. It works just fine up to a certain point of DOM-depth. With the next layer it randomly stops to work on each try of snapping. And another layer down it it totally buggy. I'll try to reproduce it somehow in the demo and keep you updated. Thanks so far! 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