Rodrigo

Hi, That could be more related to other stuff, perhaps some transform applied to a parent element of the one being pinned, a flex display property, etc. Without a minimal demo there is nothing else we can do. Please use the Stackblitz link I provided in order to create a small example that illustrates the issue you're having, please do not include your entire project. Happy Tweening!

Hi @ThomasDeer and welcome to the GreenSock forums! The main issue is how you're making your calculations to get the corresponding scroll position. Is far better and more reliable to use ScrollTrigger start and end points in order to know exactly where to scroll. On top of that if you add labels to your timeline even better. You just add a label where each instance actually start and calculate the percentage of that label's time with the total duration of the timeline, which gives you the progress of the timeline at that point, and then factor that progress into the ScrollTrigger start and end points to tell GSAP where to scroll. Here is a live example: https://codepen.io/GreenSock/pen/oNPPmwq Now granted there is a magic number in there: gsap.to(window, { scrollTo: { y: index == 0 ? st.start : st.start + (st.end - st.start) * ((labelsArray[index] + 1) / timeline.totalDuration()) }, duration: 1 }); Right here: (labelsArray[index] + 1). That number is there because you're adding 0.5 seconds of dead time at the start and end of the timeline. So always keep in mind those offsets to estimate that particular number. Of course if it's 0.5 seconds you can store that in a constant and then just multiply that by 2. Hopefully this helps. Happy Tweening!

Hi, I've read your posts in this thread a few times and I'm a bit fuzzy on what's the issue here. In the codepen when the scroll position is 0 all letters are perfectly lined up, no issues there. You mention that at some point they are not lined up in your local setup when the scroll position is 0? That is not reflected in the codepen so unfortunately we can't debug anything there. If this is happening on our local setup, be sure to use the same versions of the GSAP core, ScrollTrigger and ScrollSmoother. The current version is 3.11.5. Besides that I'm afraid there is not a lot more I can do for you. Another alternative is start with your codepen example on your local environment and start adding other sections and scripts until it breaks, then you'll be able to isolate what is causing this. Hopefully this helps. Happy Tweening!

Hi, When it comes to using GSAP in a React environment GSAP Context is your best friend. It prevents the double effect call in strict mode introduced in React 18. That could be a reason for this. https://greensock.com/docs/v3/GSAP/gsap.context() Also I'd recommend you to use GSAP MatchMedia instead of the native match media object. The benefits are that it works great for creating GSAP animations in different breakpoints and also is a wrapper for GSAP Context, so you get all those benefits in one go: https://greensock.com/docs/v3/GSAP/gsap.matchMedia() The effect hook would look a bit like this: useLayoutEffect(() => { const mm = gsap.matchMedia(); mm.add("(min-width: 768px)", () => { // All your GSAP code here }); return () => mm.revert(); // <- Super Easy Cleanup! }, []); Finally based on the little snippet you're sharing the main suspects I have for your issues are: You're not cleaning up your GSAP instances when the components are unmounted You are using from instances in your setup. This in strict mode is quite problematic as mentioned in this thread: You could have conflicting ScrollTrigger instances, but without a minimal demo I couldn't tell you that. Give MatchMedia a try and if you keep having issues, please include a minimal demo. You can fork one of our React starter templates: https://stackblitz.com/edit/react-cxv92j Hopefully this helps. Happy Tweening!

Hi, I'm just creating a single timeline and looping through all the elements you want to animate and I'm just pinning the entire section. In your original approach you're creating a ScrollTrigger instance for each element you're animating (in the loop you create there). Since I'm just using a single timeline and ScrollTrigger instance for everything, there is no need to run any calculations. All the elements are there when the timeline (and i't ScrollTrigger) instance is created, so the normal flow of the document is enough to sequence everything right. Then ScrollTrigger refresh mechanism does the heavy lifting for us 💪 Hopefully this clear things up. Happy Tweening!

Hi, That's because when the repeating timeline is created again the current value of the d attribute on the path is the shield one, so GSAP uses that as part of the loop. The solution I can give you is to morph the path to it's original shape and then restart the loop: ScrollTrigger.create({ trigger: ".third", start: "-100% center", end: "200% center", onToggle: (self) => { if (self.isActive) { // if it's active, kill the current blob animation and morph to the shield shape blob && blob.kill(); blob = gsap.to("#step1", { morphSVG: "#shield", ease: "power1.inOut", duration: 1 }); } else { // otherwise, go back to the blob gsap.to("#step1", { morphSVG: "m131.6132,18.2754c14.1,10.1,26.8,21.2,34.4,35.3,7.7,14.2,10.3,31.4,6.4,46.5-4,15.2-14.5,28.2-26,39.2-11.5,10.9-23.9,19.7-38.1,25-14.2,5.2-30.1,6.9-44.2,2.6-14.1-4.2-26.4-14.4-37.6-26.2-11.3-11.8-21.5-25.1-24.3-40-2.8-14.8,1.7-31.2,10-44.3,8.3-13.2,20.4-23.2,33.5-33.7C58.7132,12.0754,72.8132,1.0754,87.5132.0754c14.8-1,30.1,8.1,44.1,18.2Z", duration: 1, onComplete: animateBlob, }); } } }); Maybe Jack can craft a solution that's more elegant and concise, but for now that seems to work as expected. Hopefully this helps. Happy Tweening!

Hi, Can you create a minimal demo that we can take a look at in our devices in order to test? Thanks!

Hi, I assume that you're looking for something like this: https://codepen.io/GreenSock/pen/mdKWBmm If not, please create a minimal demo that shows what you have so far. You can fork this codepen that includes all the bonus plugins: https://codepen.io/GreenSock/pen/aYYOdN Happy Tweening!

Hi, I see in your codepen example that the issue happens when you pass the breakpoint (1260px) but not when the page loads above or below that breakpoint. Maybe you should take a look at GSAP MatchMedia in order to revert and create the Draggable instance when the breakpoint is passed or update the Draggable instance when passing the breakpoint: https://greensock.com/docs/v3/GSAP/gsap.matchMedia() https://greensock.com/docs/v3/Plugins/Draggable/update() Hopefully this helps. Happy Tweening!

Hi, Unfortunately we can't help you find a particular thread in the forums, personally I don't recall that particular one. You should definitely look into ScrollTrigger for doing that particular animation as it shouldn't be too complicated. A few notes: It's mostly about HTML and CSS. Setting overflow hidden and animating the x property of the entire element to create the masking effect. Don't use ScrollTrigger right off the bat, create your animation using a timeline or a single tween if that's possible and when the animation works as expected, plug ScrollTrigger into the mix. If you have any GSAP related question, please remember to create a minimal demo so we can take a look at it. Happy Tweening!

Hi @Nicksav and welcome to the GreenSock forums! Maybe you could try Stackblitz to create a Vanilla JS project: https://stackblitz.com/?starters=vanilla Happy Tweening!

Hi @Sholi and welcome to the GreenSock forums!, It should be as simple as this: https://codepen.io/GreenSock/pen/XWPPEzx Hopefully this helps. Happy Tweening!

Hi, I just checked and the URL for the GSAP Core is not being loaded for me at least, so you might want to check that CDN link or whatever it is that you use for getting GSAP. Happy Tweening!

Hi, Honestly I couldn't tell you why it worked with Scroll Magic before. Since is just an issue of the elements being stacked and being absolutely positioned, this seems to work as expected: slides.forEach(function (elem, i) { gsap.set(elem, { position: "absolute", top: 0, zIndex: (slides.length - i) }); /* Rest of the code in the loop */ }); That basically adds a higher z-index to the first element. Hopefully this helps. Happy Tweening!

Hi, You might want to check this thread (and the one mentioned in that thread as well): Hopefully this helps you getting started. Happy Tweening!

Hi, So I assume that you have a .js file that creates the ScrollSmoother instance, just before the ScrollSmoother create method, put a console call there. If you have some other custom JS files, do the same there in order to see if the scripts are actually executed at some point. Is quite unusual for things to just stop working all of the sudden and get no console errors. There should be some sort of error related to keeping that plugin you mention. If everything works when removing that particular plugin, it's clear that the plugin is creating a problem and that should be in there, unless the problem is created on the PHP side of of things (server), then you should try some logs in your PHP. Finally, just as a precaution be sure to use the same version of GSAP Core, ScrollTrigger and ScrollSmoother. Happy Tweening!

Hi @Design Newbie, No need to apologize at all. GSAP forums are a safe and friendly place where we're all teachers and learners, no dumb questions, downvotes or anything of the sort around here. If you're just starting with web development, maybe dive right into GSAP might be a few steps away. I strongly recommend you to get some HTML/CSS/Javascript knowledge first and then getting your mind wrapped around how GSAP works will be super simple. Here you can find great learning resources for free: https://www.youtube.com/@freecodecamp/featured Happy Tweening!

Hi, Debugging wordpress sites is super difficult since we don't have access to the code and we can't play with it. My main suspect is that wordpress updated itself and something might have broken that particular plugin and that is affecting not GSAP specifically but everything else. Can you try some console calls in your files that use GSAP in order to see if those get called? Sorry that we can't be of more assistance here, to be honest I don't envy you right now, I haven't worked with wordpress in almost 7 years and it seems that not a lot has changed in that time , but I do remember running into inexplicable issues like this. Happy Tweening!

Hi, Sorry about the frustration, we all know is hard trying to solve something and not being able to progress on it. Unfortunately locomotive is not a GSAP plugin and we can’t provide a lot of support for it. I’ve never used locomotive so I can’t say what could be the issue you’re having right now. I could be wrong about this, but maybe the problem stems from the way pinning works in ScrollTrigger and the way locomotive works in moving the scroller container. Take a look at this for better understanding: https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children On top of that is Saturday night and, while we thrive in giving all our users the best and fastest possible support we do ask for understanding if there is some sort of latency on the weekend. Here is one example of using locomotive with an horizontal section https://codepen.io/kairij/pen/KKoZxVL Also you can find some results looking in google: https://www.google.com/search?q=scrolltrigger+locomotive+horizontal&rlz=1C9BKJA_enCL1045CL1045&oq=scrolltrigger+locomotive+horizontal&aqs=chrome..69i57j69i60j0i546j0i30i546.31131j0j4&hl=en-US&sourceid=chrome-mobile&ie=UTF-8 Hopefully this helps. Happy Tweening!

Hi, Unfortunately there’s no way as far as I know. CSS modules are there to scope classes in order to prevent class names collisions. But keep in mind that GSAP Context has scoping built into it, so in your case all you have to do is pass sectionRef as the scope and any selector you use will be scoped to that ref so you’ll avoid selecting any element that has the same class name elsewhere in your application. So passing a custom class the way you’re doing it right now should work. In order to pass the scope into GSAP Context just do this useLayoutEffect(() => { const ctx = gsap.context(() => { const sectionContent = gsap.utils.toArray('.content')) }, sectionRef)// <- Scope return () => ctx.revert() }, []) That should create an array of the content elements inside the ref and not select any other that’s outside. Hopefully this helps. Happy Tweening!

Hi @Kkkrxs and welcome to the GreenSock forums! There are mostly two issues in your setup. You have a Timeline with repeat -1 running, which means endlessly looping. Then you have another GSAP instance that morphs the same path using ScrollTrigger. This is what happens: The endless timeline morphs the path over and over. The ScrollTrigger start point is passed and then the other GSAP instance starts. It basically animates the same property on the same element, so it overrides the endless timeline, which is still running. The tween that was triggered by the ScrollTrigger ends and in the next GSAP tick, the timeline, that is still running, takes over and that's when you see the glitch. The solution is to pause the timeline using the onEnter callback by ScrollTrigger and run the shield morph. Then using ScrollTrigger onEnterBack callback, morph the path to it's starting shape and restart the timeline. Here is a live example: https://codepen.io/GreenSock/pen/BaOPNEQ Hopefully this clear things up. Let us know if you have more questions. Happy Tweening!

Hi, Is not that a live example is not accepted. If the live example is a good reference for what you're trying to do, then no problem. When users ask us to find an issue on a live site we tell them that we can't because we can't access or edit the code and play with it in order to test and see what could be the issue. If the live example gives u a good idea of what you're trying to achieve, then by all means include it so we can take a look and compare it with your set up, in the hopes that it'll speed the process. Happy Tweening!

Hi, That's just an HTML/CSS issue, not a GSAP related one. Basically in large screens you have all other elements stacked on top of the first one. If you try to select the button with devtools, you'll see that devtools will select the sixth slide and not the first one. You should apply visibility hidden and opacity 0 to the content container as well or just the container and not the content: Hopefully this helps. Happy Tweening!

Hi, I just created a couple of examples in my local environment with both Vite and Create Vue App and I can't replicate the issue you're mentioning. I event forked our example in Stackblitz and it seems to work as expected: https://stackblitz.com/edit/stackblitz-starters-ogmmkh?file=src%2FApp.vue&title=GSAP Starter If you want you can fork this example: https://stackblitz.com/edit/vue-dm3aa9?file=src%2FApp.vue Or go directly to Stackblitz's creative tab and select the Vue3 starter there for a one click immediate setup: https://stackblitz.com/?starters=creative Happy Tweening!

Hi, We don't impose users to create small demos, the fact is that is simpler for us to find the issue. You can do it, but if it's too much and too complex the chances of getting a quick response could get reduced. The fact that the codepen works and your live site doesn't tells us that the issue is not on that particular section that's why I suggested removing everything else and see how it works. Now the fact that the codepen doesn't reflect the real life scenario are different is not ideal neither. If you can create an example that is not extremely complex to follow go ahead, just don't include the HTML and CSS of the other sections, just use some empty elements that emulate the heights as much as possible. Happy Tweening!