Rodrigo

Hi, Because I have to access the methods added to the GSAP Context instance in the effect hook. Keep in mind that the handlers and the effect hook have different scopes, since each one is a different function, so they don't have a clue of what's going on inside each other. In this example: const methodA = () => { const a = foo; }; const methodB = () => { const b = bar; }; There is no way I can access a in methodB, right? Well is the same here: const myHandler = () => { ctx.myMethod(); // ERROR! }; useLayoutEffect(() => { const ctx = gsap.context((self) => { self.add("myMethod", () => { gsap.to(".some-element", { x: 200 }); }); }); }, []); In this case ctx is defined inside the effect hook, so it only exists on that particular scope or execution context. The myHandler function has no idea about ctx, so we need to put it in an execution context that both share and that is the root of the React component. Since we don't need ctx to be created on each re-render of the component, we put it on a ref so it's kept through re-renders. https://www.freecodecamp.org/news/how-javascript-works-behind-the-scene-javascript-execution-context/ Hopefully this clear things up. Happy Tweening!

Thanks Paul!

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/rNZqwQZ All credits to @nico fonseca who created this amazing example: Hopefully this helps. Happy Tweening!

No problemo, no need to apologize happens to the best of us Glad to hear that you find the problem 🙌 Happy Tweening!

Hi, I'm not seeing any jumps. Is worth noticing that on full screen your codepen doesn't have a scroll area because the content is smaller than the screen height. Always include some spacing elements that create scrolling on the examples. Finally you should listen for the events in the bootstrap accordion, so when the animation is completed and the layout shift is done you should call ScrollTrigger's refresh method in order accommodate the start and end points of your ScrollTrigger instances: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh() Hopefully this helps. Happy Tweening!

Hi, You should try implementing the Vertical Endless Loop helper function: https://codepen.io/GreenSock/pen/MWXPgKm That stems from the Horizontal Endless Loop helper: https://greensock.com/docs/v3/HelperFunctions#loop Give that a try and let us know how it works. Happy Tweening!

Hi, Sorry about the troubles. I ran your codepen example in debug mode and I was able to see that things got really weird when doing a hard refresh on the page. Unfortunately Locomotive is not a GSAP product and we don't have the time resources to support it. On top of that I know very little about it so I couldn't tell you what is creating the issue. I tried updating GSAP, ScrollTrigger and Locomotive to their latest versions. Also added some extra configurations and code and didn't change much. It works most of the times but sometimes it breaks: https://codepen.io/GreenSock/pen/qBMJmaX I even tried in this example created by @akapowl and the issue persists: https://cdpn.io/pen/debug/wvJroYy If you scroll down and then do a refresh or hard refresh everything goes wrong. My main suspect is the locomotive configuration, since the scroll bar also gets out of place and some as this doesn't happen on their main website: https://locomotivemtl.github.io/locomotive-scroll/ You should create an issue on their repo and look on stackoverflow for some answers. GSAP has it's own smooth scroll solution ScrollSmoother that works and integrates ScrollTrigger effortlessly, so I suggest you take a look at it: https://greensock.com/scrollsmoother/ Sorry I can't be of more assistance. Happy Tweening!

Hi @Klint, The CSS Rule plugin is on the core files, but it's now deprecated in favor of using CSS Variables. You can read more about it here: https://greensock.com/docs/v3/Plugins/CSSRulePlugin Happy Tweening!

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!