Leaderboard

Hi there, thanks for the heads up. There's an issue with our SSL cert I'm afraid. I've contacted @Prasanna who handles our private repo and we'll keep this thread updated. In the interim you can use the zip install to access the files. So sorry everyone. Hold tight! https://gsap.com/docs/v3/Installation?tab=npm&module=esm&method=zip&tier=free&club=true&require=false&trial=true

Also using this.https://codepen.io/GreenSock/pen/XWOeLEb

Great, thanks for the speedy solution!

Great catch, @aviolin. Sorry about any confusion there - it should be resolved in the next release which you can preview at: https://assets.codepen.io/16327/gsap-latest-beta.min.js As a workaround, you can just add this: tween.scrollTrigger && tween.scrollTrigger.kill(); https://codepen.io/GreenSock/pen/zYXpmBB?editors=0010

With the help of Slater. app AI for Webflow, asking the right questing and mention the _align code that gave trouble, like you said Rodrigo - it came with a solution that did all the magic and it works perfectly now with no errors. Thank you for pointing me in the right direction. It was this code. barba.hooks.leave(() => { if (tween) { tween.kill(); } });

Here's a simplified example! https://codepen.io/GreenSock/pen/MWRrBqQ?editors=0010 Although the one on the site actually uses a timeline and calls invalidate each time so that the random values get refreshed. I'll see if I can extract it into a codepen 👀

Missed that id, between different versions of the demo, apologies and thanks for catching that. Many thanks for your answer regarding scrolling during the Flip animation, Rodrigo. I appreciate you have been very generous with me.

We're back up again everyone! Thanks for bearing with us through this outage. 💚 We appreciate you all!

Hi, Indeed that is not a simple thing to achieve but you should definitely create and execute any type of scroll (either direct or animated) after the Flip instance is completed. It doesn't make any sense to run that when the Flip animation has started or is still running IMHO as you have it now. On a quick glance in your demo I can't see anything with an actual ID attribute in your Figure component: <div ref={element} className="relative w-full h-full max-w-4xl" data-image-id={key} > <Image src={url} alt={alt} sizes={imageSizes} style={{ objectFit: 'contain', objectPosition: 'center', width: '100%', height: 'auto', }} onClick={clickHandler} onLoad={() => setIsLoaded(true)} className={cn( isLandscape ? '' : 'max-h-[90vh] object-cover', 'h-auto w-full cursor-pointer', )} /> <h3 style={{ opacity: 0 }} className="caption pt-2 text-xs sm:text-sm">Image caption</h3> </div> So I wouldn't expect this to actually work: gsap.to(window, { duration: 2, scrollTo: { y: document.getElementById(scrollToId), offsetY: 100 } }); So you're passing an id (scrollToId) but where can that ID be found? You could also explore the getBoundingClientRect method: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect This is beyond what we can do in these free forums since we need to focus our time in GSAP related issues and this is not a GSAP issue but mostly a logic and React setup one. Hopefully this helps. Happy Tweening!

Thanks Cassie for your workaround, the strict-ssl solution can't be done on our hosting provider, but we will use the tgz route if it's still down tomorrow morning. Could you keep us posted here to be notified when it's solved ? Thanks a lot, G.

Hi, There shouldn't be any issues in using GSAP Tweens/Timelines, ScrollTrigger and ScrollSmoother in any type of app (Svelte/SvelteKit, Vue/Nuxt, React/Next). We have a collection of SvelteKit starter templates on Stackblitz that you can check: https://stackblitz.com/@gsap-dev/collections/gsap-sveltekit-starters As you mention without a demo is hard for us to tell, maybe you have too many elements/components with an absolute or fixed position which are taken out of the document flow and kind of forces you to add some height to the body element, but that shouldn't be needed in normal circumstances. Again you can check our starter templates in Stackblitz and use the one for ScrollSmoother as a reference: https://stackblitz.com/edit/sveltejs-kit-template-default-dvnud9?file=src%2Froutes%2F%2Bpage.svelte Hopefully this helps. Happy Tweening!

Hi there, yes it's down to our SSR cert. We're working on a fix, In the interim you can use the Zip file to access the club files. Thanks for your patience and support 🙏

Yeah, be careful about this: gsap.killTweensOf('.caption'); If you run that before the Flip instance is completed it will have no effect because that particular tween hasn't been created yet. That tween is created in the onComplete callback of the Flip instance, so GSAP won't find any tween related to that selector, that's why either killing the Flip instance or using a boolean in the onComplete is the best alternative. You can use a ref to store the Flip instance in order to simplify that. Hopefully this helps. Happy Tweening!

@tempest054 You can start here.https://codepen.io/akrdesign/pen/dyLJRWL

wow! it dit the trick! thanks

Hi, I've been fiddling a bit with your demo and besides the captions issue I can't reproduce other problems in your demo. I think the issue stems from the delay you have in your instance for showing the captions: gsap.to(imageElementsArray('.caption'), { delay: 2, // <- HERE duration: 0.5, opacity: 1, stagger: 0.15, ease: 'circ.inOut', onComplete: () => { // The srcSet on each image is controlled by tracking isGridView state setIsGridView(true) } }) I think a safer approach is to use the onComplete callback from the Flip instance. As soon as I remove that delay, the captions are no longer visible. Is worth mentioning that using the onComplete callback from the Flip instance also can cause this behaviour since when you toggle before the Flip instance is completed the onComplete callback will still be triggered. You could kill that Flip instance to prevent that callback from being called or use a simple boolean to prevent the captions tween from being created at all: const performLayoutFlip = contextSafe((container, scrollToId, captions) => { const selector = gsap.utils.selector(container); const state = Flip.getState( selector('.grid-container img, .flex-container img') ); container.classList.toggle('grid-container'); container.classList.toggle('flex-container'); Flip.from(state, { duration: 2, ease: 'power4.out', scale: false, fade: true, onComplete: () => { if (captions && showCaptions.current) { gsap.to('.caption', { duration: 0.5, opacity: 1, stagger: 0.15, ease: 'circ.inOut', onComplete: () => { setIsGridView(true); }, }); } if (document && scrollToId) { document .getElementById(scrollToId) .scrollIntoView({ behavior: 'smooth', block: 'center' }); } }, }); }); const clickHandler = contextSafe((event) => { const container = imagesRef?.current; const imageElementsArray = gsap.utils.selector(container); const switchingToGridView = container.classList.contains('flex-container'); if (event.target.tagName === 'IMG') { if (switchingToGridView) { performLayoutFlip(container, null, true); showCaptions.current = true; } else { showCaptions.current = false; gsap.killTweensOf('.caption'); // Fade out all captions before Flip gsap.to('.caption', { duration: 0.5, opacity: 0, ease: 'circ.inOut', onComplete: () => { performLayoutFlip(container, event.target.id); setIsGridView(false); }, }); } } }); Also all of this is not needed at all: const container = imagesRef?.current; const imageElementsArray = gsap.utils.selector(container); // Then gsap.to(imageElementsArray('.caption'), {/**/}); You already set your scope in the useGSAP hook to imagesRef so running this anywhere inside the useGSAP scope or any contextSafe call: gsap.utils.toArray(".caption"); Will return an array of the elements with the caption class that are in the scope of imagesRef.current, so that is quite redundant and wasteful. In fact since that is called inside the contextSafe scope you can just do this: gsap.to('.caption'), {/**/}); Since that particular GSAP instance will use the scope defined in the useGSAP hook to do the same. Here is a fork of your demo: https://stackblitz.com/edit/vercel-next-js-1kpj9n?file=pages%2Findex.jsx Hopefully this helps. Happy Tweening!

Hi, That most likely stems from the fact that the path is not there when the _align method runs: https://github.com/greensock/GSAP/blob/master/src/MotionPathPlugin.js#L113 Be sure to check if the path is there when the code runs. Check if the barba transition has completed when this code runs so the DOM elements are actually there, especially the path you're targeting in your MotionPath config. Unfortunately without a minimal demo there is not a lot we can do to help. Happy Tweening!

Use algebra to rearrange the formula I posted in the last comment index = currXPos / slideWidth -> currXPos = index * slideWidth.