Jump to content
Search Community

autokill required for scrollTrigger snap on iOS

janein test
Moderator Tag

Recommended Posts

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

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. 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

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

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.

  • Like 1
Link to comment
Share on other sites

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

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...