Alex.Marti

Hi @Rodrigo, Thank you for sharing your approach. It works perfectly 👍 Alex

Hello everyone, First of all, thanks for sharing your knowledge and ressources to make seamless loop. It helps me a lot. But I need to push the complexity a little bit further and add nested timeline because I need a small animation between the fading images (the rotating background). You can see my codepen here. I'm stuck because I have the same issue that @Carl had with loop : there is a gap between the last image and the repeat. I'm not sure where to begin to implement stagger calculation with nested timeline. Is it even possible? Thanks Alex https://codepen.io/iamalexm/pen/RwdqeMZ

Thanks @Rodrigo, that's what I wanted ! Alex

Thanks both of you @mvaneijgen and @Rodrigo for your answers. It helped me a lot to better understand how Flip works and how to improve my code. @Rodrigo your way of doing is almost what I'd like to achieve. EDIT : why my codepen is now showing up? : https://codepen.io/iamalexm/pen/KKJYxEb https://codepen.io/iamalexm/pen/KKJYxEb I used your code to try to animate the text with more control with a tween (or a timeline). But I think there's a better way to do this. I was thinking of using the idea of showDetails() and hideDetails() from this exemple : https://codepen.io/GreenSock/pen/JjXqMZK But it seems to complicated for what I'm trying to do.

Hello, I'm using this technique to create masonry style in a Grid. I'm hidding the content of the boxes to make them smaller. I'm stuck with this issue : I'd like to animate with a timeline and Flip the text entrance when I click on a grid Item. For now it is working but I have to use a gsap.set() to make it works and the text is coming to quickly. At the end of my click event I'm using the resizeAllGridItems() function to calculate the height of each grid items. I'd like to use a timeline to have more control for the text entrance, but I don't know how to managed the timeline with resizeAllGridItems()and Flip. Could you help me with this issue? Thanks a lot, Alex

Hello @Rodrigo, Thanks for the tip. It's too late to try this way for my current project because I'm working with wordpress and my code is already in an advanced stage. But I'll definitely try this way for my next project, that will happen very soon... I'll let you know if it works better ? Alex

Ok so I found a workaround : I only create a ScrollSmoother instance on desktop devices using @Cassie's tips in another thread : I check ScrollTrigger.isTouch and only when it's false I create the ScrollSmoother. if(!ScrollTrigger.isTouch){ const smoother = ScrollSmoother.create({ wrapper: ... , content: ..., ... }); } It's not ideal because I'd like to make it works on every devices but at least I have a good user exeprience on my website.

Hello gsap community, I struggle to find the right solution to implement a hide/show header on on scroll with ScrollSmoother. Especially on touch devices. In my codepen you can see that I've set normalizeScroll:false It works well on desktop and tablet (only if I set smoothTouch:true, otherwise the header section becomes laggy), but it's quit laggy in mobile device. If I set normaliseScroll:true the scroll isn't fluid in Tablet device. I tried differents combinaisons between smoothTouch:false and smoothTouch:true as well, and for now I can't find the right combinaison to make it works everywhere. Any advice for this particular case? Thanks a lot for you help, Alex

Thank you @akapowl I always start by reading the most comment mistakes before posting but I've miss this part ?

Hello, I'm using ScrollSmoother with a combinaison of Timeline, SplitText and ScrollTrigger. As you can see in my codepen, the text is poping without the animation with the Timeline. But if I remove the Timeline and just put a simple Tween, it works perfectly. What did I miss in my code? Thanks, Alex

Hello, [EDIT] Sorry I posted without reading all the posts... My bad. I will first read all the tips and come back if I still can't deploy on Netlify

Thanks a lot @Cassie Because of what you said I found the solution. I use the React Hook useLayoutEffect() to initialize the ScrollSmoother and the hook useEffect() to initialize the GSAP animation. As what I understood, useLayoutEffect() is called before useEffect(). Anyway, it's working nicely now, thanks to you! I changed my codepen acordily https://codepen.io/iamalexm/pen/oNpEvwv Alex

Hello, I'd like to use GSAP ScrollSmoother on top of ScrollTrigger (with some SlitText) but I have animation issue. I'm trying to use GSAP as a reusable component with React like the documentation here (section #reusable-animations) But it's not working well, the 1st animation is running smoothly but the other one are juste popping in the screen. As soon as I remove the ScrollSmoother.create(); the animations are good again. So definively something on ScrollSmoother side. Do you know what cause the issue? Thanks Alex

Thank you @GreenSock for your answer. I forgot to put the divs an ID indeed, thanks for pointing that out. But my question was more about the documentation. Just to be sure, do I have to wrap my entier content between the divs? If I do someting like that will it work as well? <header></header> <div id="smooth-wrapper"> <div id="smooth-content"> <!--- My content here ---> </div> </div> <footer></footer> Alex

Hi, Thanks again for your amzing plugins! I'm always excited when there's a new release. I read the documentation for the new ScrollSmoother plugin and I had a hard time making it works because I wasn't sure about the doc. When you say <div id="smooth-wrapper"> <div id="smooth-content"> <!--- ALL YOUR CONTENT HERE ---> </div> </div> You mean <div id="smooth-wrapper"> <div id="smooth-content"> <!--- ALL YOUR CONTENT HERE ---> <header></header> <main></main> <footer></footer> </div> </div> It is correct? Basically I have to put ALL my page content between these two divs?