Spin Interactive

Hello, Yes, the problem has been solved. But I have a few questions: - If we define a "target", is the "normalizeScroll" encapsulated in that "target"? Or is it always global to all ScrollTrigger on the page? - In the "normalizeScroll" documentation, I don't see anything explaining this "target" parameter. Perhaps you need to add an entry to explain it? Thx, Simon

Hi @Rodrigo, If you look at it in an IOS mobile you will see the error I am talking about. It's the exact same bug. I tested it on an iPhone 12 Pro IOS v.17.3.1. I also tested it on Android and this is working fine. I know there are workarounds on IOS, but nothing seems to work as I explain in my first post. I have solved my issue putting pinType: fixed; but I have rework multiple thing in my application (remove transform on parents, work on a new lifecycle, etc...) but I think this is a bug in ScrollTrigger. Thx, Simon iphone-12-pro.mp4

Hello @Rodrigo, Thanks for the answer. The pinType is already equal to transform since the scroller isn't the body as explained in your documentation. I also tried to remove the transform just to be sure that there is working without it but even without transform this is not working in mobile. If I remove the overflow: auto; (and everything linked to it), it's working as expected. But I can't do that in a real project. Thx, Simon

Hello, I have an issue with ScrollTrigger in mobile when I use it inside a panel. What's the user path : He is in the home. He clicks on a button which open a panel from the right to the left (with a transform: translateX). When the panel is fully shown, the user can scroll inside the panel (not the page) and there is a box which is sticky inside this panel. I have tried : ScrollTrigger.normalizeScroll(true); : But the scroll inside my panel isn't working anymore. ScrollTrigger.normalizeScroll({allowNestedScroll: true}) : As explain here. Doesn't change anything. Second try + pointer-events: none; : As explain here. The scroll doesn't work anymore (same as first try) pinType: "fixed" : It works, but only if I have not the transform on a parent. I need to have this transform because of the panel's apparition animation. Do you have an idea how I can fix this ? Thx, Simon

Hi, With both of you, I succeeded to do what I want @Cassie You had perfectly right about pinSpacing. That was a problem. I tried at first to put pinSpacing into variable, and when the dog's timeline finishes, refresh the pinSpacing, but that's doesn't work. So I looked what have done @akapowl and that was exactly what I want. The only problem, it's the css which goes with. I can't do that "easely" and "properly" in my project. With all of this, I took what you did (in js) and I only added few things. I gave to my section a marginBottom who is equal to the height we have to scroll, and disabled the pinSpacing In some way, I think I do my "own" pinSpacing https://codepen.io/simon-gioffredi/pen/LYWGxRj Thank you so much for your help

Hello, At first, sorry for my english, I'm not a native english speaker. I have a problem with ScrollTrigger. That's my first time using it, so maybe I don't do it correctly. What I want : First : Scroll inside the div with the dog in background, to see the image entirely. When I do that, I do not want the content of the div (white rectangle) moves. Second : When the dog is fully shown, I want to continue the "normal" scroll, by pinning the dog section, and having blue section who moves upside the dog. What I have : The dog moves like I want, but the next section moves instantly The content moves too, and pin after the first ScrollTrigger Is that clear enough ? Thanks if you look