Leaderboard

@mvaneijgen Thanks a lot mate! That helped. I used the onloadingdone event, which waits for the font to finish loading. The code is down below if someone has the same problem. document.fonts.onloadingdone = () => { splittext_code_goes_here; }; (async () => { await document.fonts.load("16px YOUR_FONT"); })(); Update: For some reason, the event doesn't work on iOS. Update 2: I don't know why the code above doesn't work on iOS even if it has support for it. I found this code instead to work fine on iOS and other devices as well. async function isReady() { let ready = await document.fonts.ready; console.log(ready); } isReady()

Hi @GSAP Helper - thanks for the reply. I have worked out what the problem is. As mentioned above, the inline styles on the carousel slides were being reset by scrollSmoother upon scroll, and this is because I'd applied the data-speed attrs to those slides also. Essentially 2 libraries trying to effect the same element at the same time, causing conflict. I've now moved the data-attrs to internal elements and it seems to work perfectly. Hopefully useful for anyone else in future who has a similar issue, regardless of library!

Yeah, deffiently wait until the font is fully loaded before you run the SplitText code something like https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/loading_event Hope it helps and happy tweening!

It's beyond the scope of help we can provide for free in these forums, but perhaps this will help get you going in the right direction: https://codepen.io/GreenSock/pen/yLWOGxo?editors=1010

Have you tried using GSAP's ScrollTrigger for pinning and animating the stacked cards? It provides a lot of flexibility for scroll-based animations. Could you share the code snippet you're working with?

I think this may have been the issue. It's weird because I've used the useGSAP hook before without registering it as a plugin. I also did not see anywhere in the useGSAP doc's that it needs to be registered. Thanks!

https://stackblitz.com/@gsap-dev/collections you can use this collection to create the demo faster

Hello, thank you for your answers. Indeed I should have cleaned the css before posting... I finally found the solution, I had left a mixin in my globals scss which was preventing it from working properly: @mixin containerInit($containerName: section, $containerType: inline-size) { container-type: #{$containerType}; container-name: #{$containerName}; } section, header, footer { &:not(.customContainer) { @include containerInit(); } } Thank you for all your advice and also for the Stackblitz starter templates, next time I will use them !

Thank you @mvaneijgen! That's exactly what I was trying to accomplish!

Hi, Thank you for responding so quickly. I just tested this time using the useGSAP hook and it works perfectly on the demo. Just adapt it for my needs. Thanks again

There's no such thing as "stop()" on a tween/timeline. Did you mean pause()? It seems like a strange way to engineer things - if you want it to repeat an animation twice, why not just wrap it in a timeline that has repeat: 1? And why are you embedding part of the animation that you don't want to repeat into the timeline? Why not either treat that as an independent animation, and fire off the repeating one in an onComplete? Or sequence them in a master timeline? Sorta like: let intro = gsap.timeline(); intro.to(...); let repeatedTL = gsap.timeline({ repeat: 1 }); // play twice repeatedTL.to(...).to(...).to(...); let master = gsap.timeline(); master.add(intro) .add(repeatedTL);

Hi @mr slowpoke welcome to the forum! I would use the Flip.fit() (https://gsap.com/docs/v3/Plugins/Flip/static.fit()/) function of the Flip plugin, to as the name implies fit the logo inside the other logo. Animating height is always something you want to avoid when animating, because it causes a browser repaint, which is really heavy on the browser a this will never come out right. I'm not complete sure what it is you want to happen, but what I've done is moved to timeline (timelines are the most powerful tool in GSAP) and add the Flip.fit() animation to that timeline, now now scroll that animation plays and the rest of the page scrolls like normal. Then as soon as the animations finishes the ScrollTrigger kills it self, it sets the pink section to a height of 0 and never played again. To me this seems the best way of handling this particular animation. Right now I've just place the .logo-text somewhere, but you can fully tweak this with CSS and then Flip.fit() will automagicly animate it to the logo up top. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/YzbqWQe?editors=0010

Hi, The demo you're linking uses clip path and a timer. For that you can use GSAP Delayed Call: https://gsap.com/docs/v3/GSAP/gsap.delayedCall() This is a very useful tool for working with Clip Path. https://bennettfeely.com/clippy/ Here is a simple demo: https://codepen.io/GreenSock/pen/eYaZZmL Last bu not least you should check this thread by @mvaneijgen about masking: Hopefully this helps. Happy Tweening!

I don't have much time right now, but I very quickly made an edit: https://codepen.io/GreenSock/pen/gOJPZqM?editors=0010 You were just killing the scrollTween and creating a whole new one, but you forgot to reset the position. So, for example, if you resized the window after the scrollbar was already 500px down from the top, you'd be creating the new scrollTween from that [new] position instead of from 0.

I provided a suggestion - It sounds like your issue lies in understanding layout and pinning. My suggestion is to build this out without the image sequence so that you can get the correct sizing and pinning behaviour first. Then when you're happy add in the image sequence. something like this https://codepen.io/GreenSock/pen/LYgdyjj?editors=1010 Could become this. https://codepen.io/GreenSock/pen/ZEqxKyb?editors=0010 Simplifying and reading the docs is always the best route to get where you need to go Here are the scrolltrigger docs Good luck!

Hi @Nikhil17 and welcome to the GreenSock forums! Normally we don't provide custom solutions based on requirements list from our users. In your case this was quite simple (simple enough that you should've been able to solve it by investigating a bit ) https://codepen.io/GreenSock/pen/zYmpmGN As I mentioned above we normally don't provide custom solutions so please don't make a habit of posting a list of requirements in order to get a working solution. Also always include a minimal demo in codepen or other sandbox service (like Stackblitz) that shows what you already have. Hopefully this helps. Happy Tweening!

Oh also maybe? https://www.awwwards.com/websites/?award=sites_of_the_day&technology=gsap-animation