JohnMersal

@mvaneijgen Thank you so much for this! So your approach DID work, but for some reason, it made everything so glitchy and slow. however, it did maintain the header/footer of the browser to remain all the time, oh and I cannot PULL TO REFRESH using this approach , maybe I'm doing something wrong? So I tried " ScrollTrigger.config({ ignoreMobileResize: true}) " which I got from the document you provided, and it worked even better. Normalize Scroll Approach: https://candid-churros-7c0625.netlify.app/index2.html Ignore Resize approach: https://candid-churros-7c0625.netlify.app/ Thank you for pointing me in the right direction much appreciated.

Hello dears, I'm trying to build a website that tells a story. and I have a div (image of a coffee bean) moving from one section to the other in a specific position. Just for a quick info: I'm refactoring this website https://yemenicafe.com/en (I built on my very early days of JS and GSAP so its buggy) So I'm building the skeleton from scratch with my current knowledge but still having some issues with it. Specially on mobile with the header and footer hiding and showing making my animation bug out I'm using "svh" for the height of the sections, but to see the problem please check out how the bottom markers are behaving on mobile Here is a CodePen: https://codepen.io/john-mersal/pen/LYaJbZL and here is a Netlify deployed page for you to review on your mobile: https://candid-churros-7c0625.netlify.app/ I hope this is enough info to help me debug/guide me on a better approach to build this correctly. Thanks. John

That is great! thank you @alig01 and @GreenSock, appreciate your support, I fixed it and all is working like a charm ❤️ thank you both!

Hello @GreenSock, Thank you so much for your response, and I can understand the delay with the huge amounts of posts and help you guys are doing here! That worked like a charm! I did not know the difference between play and resume! I assumed as much that is why my other solution with "onEnter and onLeave" worked with the same logic. I just have a small follow up question regarding your suggestions to shorten the code. I'm not familiar with the one animation timeline syntax, first of all is there documentation for that? As I've failed to find it. This is my attempt but obviously it didn't really work. ads.forEach( function (ad, idx, array) { gsap.to(sideBar, {opacity:0}, { scrollTrigger: { trigger: ad, start: `0 ${sideBar.clientHeight + 40}`, end: `1% ${sideBar.clientHeight + 40} `, toggleActions: toggleActionsStds, ease: easingSetting, duration:0.05 } }); } ); Let me know what I did wrong here. Thank you!

Ok, Well I managed to do it another way, here: https://codepen.io/john-mersal/pen/abKxrZe But I'm still interested to know what did i do wrong in the above example, as i'm using a similar approach for another website. Thanks.

Hello amazing community! I'm a big GSAP fan and this is my first time posting on this forum. I'm working on a newsletter project that has a layout that you can find on my CodePen. I'm trying to achieve "Bootstrap - Affix" similar behavior on my template ,where affix wont work for me, using GSAP. --- Functionality needed: I need to hide the sidebar whenever the bottom of the sidebar hits the top of the "Separator area, which is the AD", and shows back once the next section is on top of the page. As you can see on the CodePen while trying to scroll from top to bottom in a single go and go back up in a single go, you can see everything working just fine without any glitches and it is all buttery smooth. However, once you reach back to the top, everything breaks and the sidebar stops hiding (while it sometimes hides and this happens VERY randomly). I tried messing around with the toggleActions but I was unsuccessful (maybe I don't understand them well, but I couldn't get it to work). Any guidance in the correct direction would be greatly appreciated. Thank you John