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?

Thanks for the tip @OSUblake ! I didn't realized that my timeline got longer and longer

So it works pretty well now, but I'm sure I can improve my timeline code. if(isOpen){ masterTL.add(flipTL.play()).add(textTL.play()).play(); }else{ masterTL.add(textTL.reverse(0)).add(flipTL.play()).play(); } Is there a way to make it less verbose? Here is my copepen : https://codepen.io/iamalexm/pen/ExwzrdG

Ok I found the issue, it was css indeed. I switch my small boxes transition property from transition: all 0.3s linear; to transition : transform, box-shadow 0.3s linear; And it works.

I tried but on a CodePen I was not able to repeat this behavior, it works the way I want. Maybe it's not gsap related and it's a css issue. I'll make a few tests

Hello again @OSUblake how are you? I'm having an issue with FLIP with my website. I'm using FLIP to perform a growing/shrinking effect of my grid element like the exemples above. When I click on a small box to make it bigger, the other big boxes are moving smoothly from one row to another. But the small boxes are weirdly jumping between rows. You can see my website here (the boxes are displayed randomly, so you may have to refresh the page to see the issue properly) : https://aureverre.abiesco.ch/pourquoi-reutiliser-le-verre/ My js code is exactly the same as your last codepen so I don't understand why it behaves like this. Do you have any idea? Thx Alex

He says Hi too! ?

Awesome! Thank you @OSUblake for the tip! I updated FLIP to version 3.9.0 and it works like a charm ? I'll keep working on my grid animation and let you know if I'm stuck again ?

Hello again, So I improved my grid and add a filter. I took the exemple in this codependand add it to my grid. It works well. But now I'd like to add a footer or another div below my grid. this Codepen I have the following issue : If I put absolute : true to my Flip function, the boxes leaves and enter the way I like. But the footer jump up and down during the animation. And if I put absolute : false the footer stay in place but I lost the exit animation of the boxes. How can I have animation AND a footer that stays put? Here is my codepend : https://codepen.io/iamalexm/pen/poWNmyZ Thanks, Alex

Thanks a lot @OSUblake for your help! It's exactly what I tried to achieve! As @Carl said, I'm also truly amazed of the power of GSAP and FLIP. I have no more excuses to purchase the ShockinglyGreen plan now ? I'm looking forward to experiment FLIP and all the other plugins! Alex

Hello there, I'm trying to animate grid items. I have a grid with big items and small items. What I try to achieve : when I click on small items, they will grow with a transition and push other items away to the next space available in the grid. The others items should also have an animation when beeing pushed away. If an item is at the end of a row, it should jump to next row with a animation. What I have so far (see codepen) : I used GSAP to make items grow by changing their grid-column-end and grid-colum-row but for now there's no animation and the others items are jumping to their next position. I've also noticed a small delay when clicking on a small box, why is there this delay? My question : I know it's a complexe animation/behavior to create. Before I dive deeper in this direction, I'd like to know if it's possible to achieve this with GSAP? I've seen some others posts with grid animation questions and @ZachSaucier often redirect people to use FLIP and it's helper function. Is that something that I can achieve with FLIP? Thanks for your help Alex