Hideakimaru

Hi @cupid, In this case, you don't know how fast your images will load. It will depend on many factors. For example, go to the Network tab in the dev tools menu and set the slow 3G in the network throttling menu. You will understand why you should avoid this approach. You can't rely on all images to load after 2 seconds. You should either avoid this approach or tie this method to more objective things. Thank you so much! Hideakimaru

Hi @DanielLav, So, now I understand what are you trying to do. You are refreshing the ScrollTrigger each time when the element is done with load. So looks like everything works correctly in your approach. But I really can't find this issue. Because if open your pen with iPhone 14 in the inspector. Everything is the same with the desktop version. The behavior is the same. Maybe you could describe step by step what you do to find this problem? Example: Open code inspector with the iPhone 14 sizes. Scroll quickly to the footer section. You will see issues etc. This could help to find your problem faster. Also, do you try to watch the same issue in other browsers, devices, etc? Did you find something else? Because with your version desktop and mobile behaviors are the same for me. Thank you so much! Hideakimaru

Hello @DanielLav, So you said your images at the start did not have height. I'm not sure if this is important. Are you considering an approach in which you would initially set the dimensions? This approach also works well if inspected with iPhone 14 in the inspector. So now the images of parents have fixed sizes, and then the images are loading with lazy load in their fixed parents. So you don't need to recalculate page size when they are loaded with ScrollTrigger.refresh(). The demo: https://codepen.io/Hideakimaru/pen/zYQXaYB Hope this could help in this issue. Thanks, Hideakimaru

Hi @xnslx, So actually idk which real implementation they have... I think this should be something with this approach: https://codepen.io/xhideakix/pen/VwOdXJZ If you scroll a long time to their footer you will see that they have different footers with the same information I guess. And maybe should be something like that: https://codepen.io/xhideakix/pen/MWdXGLR Also, this is so close to the approach with Observer which looks more like what you want. Hope this will help you to find the best solution.💚 Thanks! Hideakimaru

Hello @Rodrigo!💚 Your solution is perfect works!🎉🎉🎉 I was so close to this solution, that I thought about ScrollTrigger.refresh() in useGSAP() and something like this. It was necessary to go further and transfer part of the handler logic to useGSAP(). This solution solves problems with some other React mutations too! Also, I saw the posts with the same questions. I hope this post will help someone in the future! I agree with this quote very wise and this has happened!😊 Thank you so much!!! Hideakimaru _______ Also, I include these examples below: Please, do not forget to Fork if you want to change something this could help many people after you! The version with the issue: WATCH HERE. The Rodrigo solution to this issue: SOLUTION HERE.

Hi @shalildev, So actually, I'm confused. But I have some ideas about this issue. In your example, the markers "end" position is placed at the start of ".section-3". The animation that ScrollTrigger is called stops when the top of this block meets the bottom of the viewport. end: "top bottom" As the rule says. The second try to call ScrollTrigger not working is because this already ended in the triggers in your first call. About your scrollTrigger config. scrollTrigger: { trigger: ".section-1", start: "top top", endTrigger: ".section-3", end: "top bottom", pin: ".pin-inner", scrub: 1, markers: true } This works anyway as the animation starts at the top of section 1 and ends at the top of section 3. I'm not sure if it is really to make something with .pin because he accepts only Element | undefined. It means should be a method as unpin: '.something'. But looks like GSAP does not have something like this. So if you trying to pin the element. Your HTML should look like this: <section class="SECTION flex w-full flex-col"> <div class="w-full h-screen bg-green-400"></div> <div class="w-full h-screen bg-red-400"></div> <div class="w-full h-screen bg-yellow-400"></div> <div class="w-full h-screen bg-emerald-400"></div> <div class="w-full h-screen bg-purple-400"></div> </section> Then you can add in the js file as here: gsap.registerPlugin(ScrollTrigger); ScrollTrigger.create({ trigger: ".SECTION", start: "top top", end: "bottom bottom", pin: ".pin-inner", markers: true }); https://codepen.io/xhideakix/pen/abrGpEP If you look at the marker's position you will see what they now should be good. And the ".pin-inner" element is pinned on the page. But looks like this not what are you expected. So the next example is demonstrating what you expect. As above we can't unpin the .pin property. But this example demonstrates what actually will be if you unpin that: <!--HTML--> <main> <section class="SECTION reletive flex w-full flex-col"> <div class="pin-inner fixed flex w-full h-screen justify-center items-center"> <h1 class="text-5xl text-[#000] font-bold">Pinned</h1> </div> <div class="h-screen w-full section-1 bg-green-400"></div> <div class="h-screen w-full section-2 bg-red-400"></div> <div class="UNPIN h-screen w-full section-3 bg-yellow-400"></div> <div class="h-screen w-full section-4 bg-emerald-400"></div> <div class="h-screen w-full section-5 bg-purple-400"></div> </section> </main> //JS gsap.registerPlugin(ScrollTrigger); gsap.to(".pin-inner", { scrollTrigger: { trigger: ".UNPIN", start: "top bottom", markers: true }, position: "static" }); https://codepen.io/xhideakix/pen/YzbLZGp So if you anyway want to unpin that you should expect something like this. The element is back to the start position. I guess this is not what you want. You can try the use gsap.timeline() and make something like this: <!--HTML--> <main class="flex w-full h-screen flex-col"> <section class="reletive sections flex w-full flex-col"> <div class="PINED__ELEMENT fixed flex w-full h-screen justify-center items-center"> <h1 class="font-bold text-5xl text-[#ffffff]">Pinned</h1> </div> <div class="w-full h-screen bg-green-400"></div> <div class="w-full h-screen bg-red-400"></div> <div class="UNPINED w-full h-screen bg-yellow-400"></div> <div class="PINED w-full h-screen bg-emerald-400"></div> <div class="w-full h-screen bg-purple-400"></div> </section> </section> </main> //JS gsap.registerPlugin(ScrollTrigger); const tl = gsap.timeline(); tl.to(".PINED__ELEMENT", { scrollTrigger: { trigger: ".UNPINED", start: "top bottom", markers: true }, display: "none" }); tl.to(".PINED__ELEMENT", { scrollTrigger: { trigger: ".PINED", start: "bottom bottom", markers: true }, display: "flex" }); https://codepen.io/xhideakix/pen/ZENopbw But actually, I'm not sure which behavior you are expecting. Hope this can help find to solution. Thanks! Hideakimaru

Hello Rodrigo, Thank you for your quick response.😊 The <Box /> components in the demo witch removed from the array on changing the input just need to demonstrate page behavior in which height is changing. This means that the ScrollTrigger sort() method did not help me in this situation, I guess. Because the current target for animation is the footer block. Yes, u right because of this animated Footer of the page, which is pinned to the bottom of the page and does not have scrolling space. Looks like the issue is because ScrollTriggers does not update their start position on the page if the content height is changing. And I trying to find the best solution to resolve this issue, because React pages every time change their size, in the todo list, the list of something, every time changing the height of the page, but in the gsap documentation I'm found the solution to reset ScrollTrigger start position on the renders only with hard add ScrollTrigger.refresh(). But I think maybe the gsap has a better method of resolving issue with ScrollTrigers position when the height of the page changes on the renders? __________ Reminders about how to find this problem. Please, look into this demo Here. Scroll to the bottom of the page and you will see an animated footer which works well. Then refresh the page and add something to the input (You will remove content blocks). Again check the footer, and you will see what footer animation is not working. (If you inspect this element you will see the animation which should change opacity not doing that) tl.fromTo( footerRef.current, { opacity: 0 }, { opacity: 1, duration: 5, ease: "power3" } ); Also, you could uncomment markers in the gsap.timeline() configuration and try to make everything again. (You will see the position of markers is not changing after renders). Thank you so much! Hideakimaru

Hello GreenSock!💚 I'm a beginner in the gsap. I have an issue with the animated footer when I use the ScrollTrigger in my project. Everything works well, before the situation when the content height is changed. I created a small example that demonstrates this issue: This CodeSandBox. Steps to find the issue: Comment out markers in the App.js. Scroll to the end of the page. You will see animation works great. Then, you need to refresh the page and change the input to something like "1...2...3". Check the footer again. You will see that animation not working. If test this with enabled markers I see the start placed out from the page. I tried to fix that with ScrollTrigger.refresh() in the onChange, also I tried different ScrollTrigger methods. But this anyway not what I expected. The expected animation should work regardless of page size. How can I resolve this issue? Thanks, a lot! Hideakimaru