RubberFruit Posted December 20, 2021 Share Posted December 20, 2021 Hi guys Please help me! played on the iPhone: when the scrolling reaches the top of the picture, it jumps to the top of the screen, and so on with each picture. What could it be? video:https://vimeo.com/658538950 code:gsap.registerPlugin(ScrollTrigger); let panels = gsap.utils.toArray('.scroll-item'); panels.forEach((panel, i) => { ScrollTrigger.create({ scroller: isMobile() || isTablet() ? '' : '.scroller', trigger: panel, start: 'top top', pin: i !== panels.length - 1, pinSpacing: false }); }); gsap.set('.scroll-item', {zIndex: (i, target, targets) => targets.length - i}); Link to comment Share on other sites More sharing options...
OSUblake Posted December 20, 2021 Share Posted December 20, 2021 Welcome to the forums @RubberFruit It's very hard to answer ScrollTrigger related questions without a minimal demo as there are a bunch of other factors involved, like your CSS and HTML. Thanks! Link to comment Share on other sites More sharing options...
RubberFruit Posted December 21, 2021 Author Share Posted December 21, 2021 12 hours ago, OSUblake said: Welcome to the forums @RubberFruit It's very hard to answer ScrollTrigger related questions without a minimal demo as there are a bunch of other factors involved, like your CSS and HTML. Thanks! Hi @OSUblake! But I also use which is used in my project and is difficult to implement in the code pen (in the gsap settings I use scroller: isMobile () || isTablet ()? '': '.scroller',) See the Pen eYGEgvL by rubberfruits (@rubberfruits) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted December 21, 2021 Share Posted December 21, 2021 What do you use a different scroller for? If you're trying to prevent the address bar from moving, this pen might help. See the Pen YzyaKrq by GreenSock (@GreenSock) on CodePen URL to test on mobile... Pair with CSS Scroll Snapping - ScrollTrigger Live Preview (codepen.io) Link to comment Share on other sites More sharing options...
RubberFruit Posted December 22, 2021 Author Share Posted December 22, 2021 17 hours ago, OSUblake said: What do you use a different scroller for? If you're trying to prevent the address bar from moving, this pen might help. URL to test on mobile... Pair with CSS Scroll Snapping - ScrollTrigger Live Preview (codepen.io) I use it for a different look and feel and the whole project is already built on using it That is, you suggest that the card should not be fixed at the top of the screen, but gsap itself scrolled it to the top? Link to comment Share on other sites More sharing options...
GreenSock Posted December 22, 2021 Share Posted December 22, 2021 I don't see the problem at all on my iOS device, but I watched your video and I'm pretty sure I know exactly what causes that... It's due to the fact that scrolling is handled on a different thread, thus iOS is rendering it PAST where it gets pinned for a brief moment before it executes the main JS thread and ScrollTrigger pins it. That's not a bug in ScrollTrigger - it's a logical consequence of how the browser updates things. My guess is that your video was recorded on an older (slower) device, and the page is more complex so the browser requires more resources to render. The only solutions are: Use the anticipatePin feature which basically watches the velocity of the scroll and attempts to apply the pinning just BEFORE it would be necessary. That doesn't actually "fix" the issue as much as attempts to hide it a bit. Use a smooth scrolling library (or our helper function) so that all scrolling is handled on the JS thread. That way, there's never a synchronization problem. 1 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