Leaderboard

Great spot! Thank you for pointing that out 💚

Hi, look at useStateRef, it helped me in similar situation https://gsap.com/resources/react-advanced/#usestateref

Hi @Rodrigo, Thank you once again for your time and effort. Great character of your behalf and really appreciate it! Amazing community I have to say once more and is a great pleasure to be part of it! On to the task, it seems that CSS is preventing from correct render of things... I've just found out after breaking it down 100 times that some of the elements need a specific height or CSS alteration in general to work, even if I change it through JS afterwards to match my design needs. If anyone stumbles upon my codepen in the future let me know if you face any problems and I will help you out. The only problem that still exists is the windows scroll along with inner container's scroll which also looks it works in codepen in my setup it does not. Even in a clean white page I still get the same problem. I would try to troubleshoot further and update the answers here for anyone who might need it in the future. If anyone else has faced similar behavior between scrollsmoother and inner container scroll let me know if you have any suggestions... Until then... Thank you all! Thanks Rodrigo.

Hi @JLernDesign, The demo we're using uses React Transition Group's SwitchTransition component: https://reactcommunity.org/react-transition-group/switch-transition This component as you can see in the docs has an out-in mode by default which means the element being unmounted is animated out and then the element being animated in is mounted before the animation starts: https://stackblitz.com/edit/react-6rzfpp?file=src%2Fcomponents%2FTransition.js Maybe you can replace the SwitchTransition component with the TransitionGroup one, that should work the way you expect: https://reactcommunity.org/react-transition-group/transition-group Hopefully this helps. Happy Tweening!

Hi @MichelC welcome to the forum! It is hard to say without a minimal demo what is causing this, could be anything in your site and sadly we can't edit the code your live website. I don't see anything wrong with your GSAP code, so the quickest way to debug is start disabling big chunks of your code base to see if the issue disappears and when it does start enabling small things back in again, until you've found the piece of code that is the culprit. I see you load bootstrap, this adds scroll-behaviour: smooth; to the html this can cause issues so you could look in to disabling this https://stackoverflow.com/questions/75366493/disable-smooth-scroll-in-bootstrap-5-with-html-css-code Maar anders dan dat is het lastig te zeggen, hopelijk vind je de issue snel anders zien we graag een demo om je verder te helpen

Will try to create a CodePen tomorrow to see if I can reproduce the problem..

Hi @Alex.Marti, In this cases my approach (and I'm not saying that is the best way to do this, just a personal preference) is to create a timeline with a loop that considers that the first element is already visible and animated in, then before that loop I create a Tween/Timeline that just animates the first element in and keep that outside the timeline that runs endlessly: const master = gsap.timeline({ repeat: -1 }); const images = gsap.utils.toArray(".image"); const first = images[0]; const firstBg = first.querySelector(".img-bg"); // Animate the first element in OUTSIDE THE LOOPING TIMELINE gsap.timeline() .to(first, { autoAlpha: 1 }) .to(firstBg, { rotation: 5 }); images.forEach((image, i) => { const bg = image.querySelector(".img-bg"); const next = images[i + 1]; if (next) { const nextBg = next.querySelector(".img-bg"); master .to(bg, { rotation: 0 }, "+=2") .to(image, { autoAlpha: 0 }) .to(next, { autoAlpha: 1 }, "<") .to(nextBg, { rotation: 5 }, "-=0.2"); } else { // This is the last element master .to(bg, { rotation: 0 }, "+=2") .to(image, { autoAlpha: 0 }) // Animate the first element in, INSIDE THE LOOPING TIMELINE .to(first, { autoAlpha: 1 }, "<") .to(firstBg, { rotation: 5 }, "-=0.2"); } }); Like that the looping timeline runs based on the fact that the first element will be visible at the start of the timeline, like that you get an endless loop with a timeline. Here is a fork of your demo: https://codepen.io/GreenSock/pen/abMQPpa Again this in no case means that @Carl's approach doesn't work in your scenario, I'm 100% sure that you can find a way to accommodate your needs using his approach. My simpler brain just works better with loops, like that the solely working neuron left only has to spin in one direction 😉 Hopefully this helps. Happy Tweening!

Hi there - I understand that your project has many components, but the purpose of a minimal demo is to try and recreate the issue with as little code as possible. As the previous answer mentioned - The process of creating a minimal example will usually surface the issue. I assume that you mean the animations are playing on load rather than on scroll? If so, try to create a minimal demo that shows a simple animation that runs on load but not on scroll, then we can advise. If you can't recreate that, as the advice above states, build up bit by bit until it breaks. Other advice: If you're using ScrollTrigger, add some markers to see where the animations are being triggered Check your console for errors Play "spot the difference" - what's different between local and live? Is something maybe loading in slowly and causing a layout shift? Is there an issue with your deployment process/build tooling? This is probably where I would start if it was working locally but not on prod.

Hi, @Carl made a great video explaining how to do this, be sure to check the codepen link in the video description as well: Hopefully this helps. Happy Tweening!

It seems like you don't have updated the pen, you're linking my pen. As I said before, you can use two ScrollTriggers and have the second ScrollTrigger start later which grows the animation . Again there is no watch for second scroll. You could look in to the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ to really watch for scroll events, but this makes things loads more complex and when starting out I would start simple and slowly build our the tools you use to get a better understanding how things works. https://codepen.io/mvaneijgen/pen/KKEreqb?editors=0010

Thanks guys, with the help of the video I've got it working how I need it! https://codepen.io/mrjonoces/pen/eYXQOBq

That's beyond the scope of help we can generally provide in these free forums, but if you want to force it to scroll to the end of the ScrollTrigger, you could use the ScrollTrigger's "end" value and plug that into a window.scrollTo(), like this: https://codepen.io/GreenSock/pen/RwdqLvQ

Thanks for being a Club GSAP member, @Mark Rosenberg! 💚 In order for MorphSVG to do its work, it must have access to the <path> node itself, but if you're merely embedding the SVG as an external file, the browser won't allow that (security). You have to actually put the <svg>...</svg> code itself into the document where you're going to do the morphing. Does that make sense?

Hey there! So the timeline is working, but you're trying to stagger multiple elements *inside* a for loop (where you only have access to one element at a time) Rather than stagger, you could do something like this where you define the timeline outside of the loop, then loop round and add each line to the timeline const timeline = gsap.timeline(); const titles = gsap.utils.toArray<Element>('p', container.current); // loop round the titles titles.forEach((title) => { const splitTitle = new SplitText(title); // add each title to the timeline timeline .from(splitTitle.lines, { opacity: 0, y: 20 }) .to(splitTitle.lines, { opacity: 0, y: -20 }); }); https://stackblitz.com/edit/stackblitz-starters-mcygak?file=app%2Fpage.tsx Alternatively you could push all the lines into an array and then stagger them - something like this const titles = gsap.utils.toArray<Element>('p', container.current); const lines = [] // loop round the titles titles.forEach((title) => { const splitTitle = new SplitText(title); lines.push(splitTitle.lines) }); // add each title to the timeline gsap.timeline() .from(lines, { opacity: 0, y: 20, stagger: 0.2 }) .to(lines, { opacity: 0, y: -20, stagger: 0.2 }); (sorry I don't understand typescript to adjust that for you) Hope this helps!

I'm not a Next.js guy, but it looks to me like this is purely a Next.js behavior issue where it renders the page first, then when hydration is done it goes back and re-renders at which time it fires useEffect/useLayoutEffect/useGSAP hooks. Even if you completely remove GSAP from the equation, and you directly set the elements' style (maybe opacity), for example, you'll see that same behavior (FOUC). One solution I've seen from a quick search online is to set the initial opacity of the container to be 0 so that the user doesn't see it initially, and then in your hook you can set opacity to 1 immediately: https://stackblitz.com/edit/stackblitz-starters-7qfdp2?file=app%2Fpage.tsx Also, I'd recommend running gsap.registerPlugin(useGSAP) too. That's only helpful when you're running the gsap-trial in an online environment like Stackblitz. It will never hurt to register useGSAP...and it's pretty much never required in a "real" project that you compile locally, but it is helpful in these online environments. To summarize - the FOUC has nothing to do with GSAP - it's a Next.js thing. 🙂

Hi @Jannik welcome to the forum! Maybe https://gsap.com/docs/v3/Plugins/MotionPathPlugin/static.convertCoordinates() can help, but hard to say without a minimal demo. Also can you explain the problem you're trying to solve instead of the solution you're thinking of? Please also include a demo of your current setup so that we can dive directly in to the code. Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/aYYOdN

The problem is your CSS the background-clip seems not to get set to the children, the animation works fine. https://codepen.io/mvaneijgen/pen/qBvMOWy Check out below topics with possible solutions for your problem. Hope it helps and happy tweening!

Hi @NiklasG and welcome to the GreenSock forums! There shouldn't be any need for all of that. ScrollTrigger runs all it's calculations and setting start and end points on ever refresh, also in this cases is better to use an endTrigger element rather than ran all those calculations. Basically the issue here is that you are calculating that value just one time so when the screen size changes that value remains the same. One alternative is to use a function based value: const getTravelDistance = () => { let rightDivHeight = document.getElementById("right").clientHeight; let leftDivHeight = document.getElementById("left").clientHeight; return rightDivHeight - leftDivHeight; }; gsap.to("#left", { scrollTrigger: { trigger: "#left", start: "top center", end: () => `+=${getTravelDistance()}`, pin: true, markers: true, pinSpacing: false } }); Another option, as I mentioned, is to use an endTrigger element: https://codepen.io/GreenSock/pen/jOQQyQb Hopefully this helps. Happy Tweening!

@Bureau Blanc yep that is always tricky. This example uses staggers and advanced position parameter to put thing on the timeline at the right place. I've used CSS selectors in my example, but you can easily convert them back to the JS slice method if you want. This kind of reminds me of a tutorial our own @Carl did which has a great visual explanation on how to create seamless loops, be sure to give it a watch! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/JjaOWjV?editors=0010

Depends what version of Vue you're using but I usually just handle any custom js in the mounted hook https://vuejs.org/api/options-lifecycle.html#mounted Also worth noting that we're more than happy to answer GSAP-specific questions here, but if you need help with vue or three.js it may be best to head over to their forums. vue - https://discord.com/invite/HBherRA three.js - https://discourse.threejs.org There are some great general web animation and web development communities out there too that may be more what your looking for... Web animation at work discord community Animation focused, friendly, we have a channel in there! Front end horse discord community More focused on general web development, with a creative twist. Good luck with your project, if you have any GSAP questions make sure to pop back in.