Rodrigo

Hi Alan, Sorry but if we can't see the actual issue there is not much we can do ?‍♂️ The only thing I can think of, if your CSS is the same on your development environment, is this: section { position: relative; display: flex; align-items: center; min-width: 100vw; height: 100vh; font-size: 50px; font-weight: bold; background-color: red; } Basically you are setting styles for all <section> tags. Global and general styles like that can always come back to haunt you, especially since there are some browser extensions that could add a section tag to the HTML and create some issues, so the only advice I can give you is to give a more specific style selector to those elements. Hopefully this helps. Happy Tweening!

Hi, One of the issues is that your start and end points are triggering at the same time: Also your example doesn't have any height animations whatsoever so is really hard to have a good idea of what you're trying to do. I strongly recommend you to remove ScrollTrigger completely and focus on getting the animation working as expected first and then add ScrollTrigger to the mix as @Cassie shows in this video: Hopefully this helps. Happy Tweening!

Hi, Is not really clear to me what you're trying to do, please be more specific about what's the desired effect. Maybe include a link to a live site that shows what's your goal. Also your example has over 3000 lines of CSS, so there could be some issue there but we don't have the time resources to comb through that trying to find a problem there. Finally your ScrollTrigger config has a trigger that is not present in the HTML: let tlPanel = gsap.timeline({ scrollTrigger: { trigger: ".container_panel ",// extra spaces here, remove those start: "center center", end: "max", pin: true, scrub: true, markers: true, snap: 1 / (panels.length - 1) } }); <div class="container_pane "> So that is not going to work. Try to reduce your demo to be as simple and as small as possible, avoid thousands of lines of code or styles. Happy Tweening!

Hi, I would strongly recommend you to get the Draggable/Inertia part working first and then add the ScrollTrigger part. Here is a simple demo for using Draggable and Inertia with snap: https://codepen.io/GreenSock/pen/BavGpNN Finally take a look at this thread for ideas on how to combine Draggable with ScrollTrigger: Hopefully this helps. Happy Tweening!

Hi, Randomly floating particles are not the simplest thing to achieve. You can check this examples by @OSUblake: https://codepen.io/osublake/pen/qmXPMm https://codepen.io/osublake/pen/pRNYRM Also you can check this channel: https://www.youtube.com/@Frankslaboratory/videos Finally you can take a look at particles js as well: https://vincentgarreau.com/particles.js/ Hopefully this helps. Happy Tweening!

Hi, I'm not saying that Lenis is at fault here. The main issue here is that you have animations tied to the scroll position. If you move or change that particular position, those animations has to be updated accordingly. As you already tried disabling all the ScrollTrigger instances helps but when you enable them again ScrollTrigger has to go to the top of the document in order to run all the calculations again in order to set the start and end points, calculate pins, etc. As you can see this is a complex process. The only thing I can think of is to store the scroll position and use ScrollTrigger scroll method to get to that position https://greensock.com/docs/v3/Plugins/ScrollTrigger/scroll() But I can't really guarantee that it'll work. Again this is a tricky scenario Hopefully this helps Happy Tweening!

H @kasiuleckretulec and welcome to the GreenSock forums! A few things: You are using really old syntax, we strongly recommend using the newest syntax (V3), for that you can check these resources: You are using React but you're not properly cleaning up, when using GSAP on react apps always use GSAP Context. Check the resources in this page to know more: Finally we have a collection of starter templates in stackblitz so you can see all this working: https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters If you keep having issues, please post a minimal demo that clearly illustrates the problem you're having. Hopefully this helps. Happy Tweening!

Hi, I don't have a lot of experience working with Lenis but maybe instead of disabling/enabling the ScrollTrigger instances, you could try preventOverlaps and fsatScrollEnd in your ScrollTrigger config: Beyond that I can't think of anything else since Lenis is not a GSAP plugin. We have our own smooth scrolling solution called ScrollSmoother https://greensock.com/docs/v3/Plugins/ScrollSmoother Hopefully this helps Happy Tweening!

Hi, This most likely is a browser rendering thing rather than a GSAP related problem. In firefox for example I can't replicate the issue. The only solution I could offer is to scale to 1 from a smaller initial value: https://codepen.io/GreenSock/pen/GRPYBGq Another option is to use SVG instead in order to prevent this. Finally if memory serves me well, I think some fonts are more prone to this issues than others, so you might as well experiment with other fonts and see if there is an improvement. Hopefully this helps. Happy Tweening!

Hi @josiahbrown and welcome to the GreenSock forums! I'm unable to reproduce this. My screen also is 1920px width, so I tried using Chrome and Firefox devtools on Ubuntu 22 and everything is working as expected. Also give a try to the debug URL (no iframes) just in case: https://cdpn.io/pen/debug/YzygYvM If you could provide more details like browser, version, OS, etc. in order to dig a little more on this. It'd be super helpful if you tell us if you are using devtools or an actual screen that's wider than 2000px. Sorry I can't be of more assistance. Happy Tweening!

Hi @Ninthony, Thanks for sharing your findings with the community, I'm sure many users will benefit from your knowledge and kindness! ? Just an FYI we do have a couple of examples that use the Lottie-ScrollTrigger helper function in our Stackblitz examples: https://greensock.com/docs/v3/HelperFunctions#lottie https://stackblitz.com/edit/vitejs-vite-emmptw https://stackblitz.com/edit/react-pfgj43 Happy Tweening!

Hi, I think the issue stems from this: ScrollTrigger.create({ // start: 'top top', // end: 'bottom bottom', markers: true, snap: { snapTo: (progress, self) => { let panelStarts = tops.map((st) => st.start), // an Array of all the starting scroll positions. We do this on each scroll to make sure it's totally responsive. Starting positions may change when the user resizes the viewport snapScroll = gsap.utils.snap(panelStarts, self.scroll()); // find the closest one return gsap.utils.normalize( 0, ScrollTrigger.maxScroll(window), snapScroll ); // snapping requires a progress value, so convert the scroll position into a normalized progress value between 0 and 1 }, duration: 0.5 } }); That's a ScrollTrigger without any trigger element, so ScrollTrigger defaults to the viewport. If you want to pin and snap just in a specific section, then do that on a ScrollTrigger instance that applies only to that particular section. Also be sure that the ScrollTrigger instances are created in the order they appear in the screen. I'd strongly recommend you to create just the ScrollTrigger instance for that particular section, then add the other ScrollTrigger instances to your page, in order to isolate that and get it working as expected. Finally in this cases when you have a bunch of instances is better to add specific ids in order to identify each ScrollTrigger instance and you can even add indentation to the markers: ScrollTrigger.create({ id: "one", markers: true, }); ScrollTrigger.create({ id: "two", markers: { indent: 200, }, }); That will create distinctive markers for each section and that will allow you to debug easily. Hopefully this helps. Happy Tweening!

Hi, The problem, in the stackblitz demo, is that you are not cleaning up when you change pages. This solves the problems in that particular scenario: let ctx; onMounted(() => { gsap.registerPlugin(ScrollTrigger); ctx = gsap.context(() => { gsap.set('.animation', { rotate: 15, opacity: 0, yPercent: 100, xPercent: 20, }); let scrollOnPresentation = gsap.timeline({ scrollTrigger: { trigger: '.my-container', pin: true, start: 'top', end: '+=1300', scrub: 1, markers:true, }, }); scrollOnPresentation.to('.animation', { rotate: 0, opacity: 1, yPercent: 0, stagger: 0.2, xPercent: 0, }); }); }); onUnmounted(() => { ctx && ctx.revert(); }); In the case of the code you posted, which is quite different from the demo, you have to follow the same pattern, either create your GSAP instances in the scope of the GSAP Context callback or execute a function that returns the GSAP instance. Since you are running a loop, is better to just run the loop inside the GSAP Context callback. Finally is always a good idea to use markers: true in ScrollTrigger when you are in development, because it helps to identify issues like this. You would actually see the markers from the index page in the second page and that tells you immediately that you are not properly cleaning up before changing routes. Hopefully this helps. Happy Tweening!

Hi, @Carl created an excellent tutorial for seamless loops with staggers: https://www.snorkl.tv/greensock-staggers-with-seamless-loops/ That should be enough to get you started. Hopefully this helps. Happy Tweening!

Hi @broflovski and welcome to the GreenSock forums! Thanks for being a Club GreenSock member and supporting GreenSock! ? You are using React and when working with React you should always use GSAP Context: https://greensock.com/docs/v3/GSAP/gsap.context() In this case though it would be better to use GSAP MatchMedia, since MatchMedia is a responsive wrapper for GSAP Context: https://greensock.com/docs/v3/GSAP/gsap.matchMedia() In this page you can find articles that tell you how to use GSAP Context in React: In the case of MatchMedia you can use it like this useLayoutEffect(() => { const mm = gsap.matchMedia(); mm.add("(min-width: 768px)", () => { // create your vertical loops here }); // Add other breakpoints to your MatchMedia instance // as you see fit return () => mm.revert(); }, []); Hopefully this helps. Happy Tweening!

Hi @Prévost Clément and welcome to the GreenSock forums! My advice would be to use GSAP MatchMedia instead of some conditional check and GSAP Context, since GSAP MatchMedia is a wrapper for GSAP Context with responsive capacities: https://greensock.com/docs/v3/GSAP/gsap.matchMedia() const mm = gsap.matchMedia(); onMounted(() => { // MOBILE SETUP mm.add("(max-width: 785px)", () => {}); // DESKTOP SETUP mm.add("(min-width: 786px)", () => {}); }); onUnmounted(() => { mm.revert(); }); Finally your methods right now are returning a collection of DOM nodes and not the corresponding GSAP instance: function createTimeline_mobile_presentation() { gsap.set('#presentation .rotateOpacity',{rotate : 15,opacity : 0,yPercent:100,xPercent:20}); const elementToScrollAnimate = document.querySelectorAll('#presentation .rotateOpacity'); elementToScrollAnimate.forEach(el => { // ... }) return elementToScrollAnimate; } So neither GSAP Context nor GSAP MatchMedia will be able to revert those instances correctly since they are not inside the right scope. If you can't return the GSAP instance(s) (since you are running a loop), is better to run that loop inside the scope of the MatchMedia add() method: const mm = gsap.matchMedia(); onMounted(() => { mm.add("(max-width: 785px)", () => { const elements = gsap.utils.toArray(".my-class"); elements.forEach((element, i) => { // Create yor GSAP instances here }); }); }); Hopefully this helps. Happy Tweening!

Hi, Maybe you could use the Observer Plugin for that section and mix it with ScrollTrigger, like this example: https://codepen.io/GreenSock/pen/ExEOeJQ Hopefully this helps. Happy Tweening!

Hi, Maybe this threads can help: Happy Tweening!

Hi, There is not a lot we can do when it comes to live sites. The only thing I can think of is that you are not reverting your animations when the page gets unmounted. You can use the cleanup function in the effect hooks to do that: useLayoutEffect(() => { const ctx = gsap.context(); return () => ctx.revert(); }, []); Another possibility is that you are using page transitions, you need to know exactly when those are completed in order to create the ScrollTrigger instances. Have you tried setting markers to true in order to see where the markers are and, if the ScrollTrigger instances are being created at all? We have this example using page transitions in Next: https://stackblitz.com/edit/nextjs-13cw4u Hopefully this helps. Happy Tweening!

I would strongly recommend you to begin with just Flip with some buttons in order to just create Flip animations: https://greensock.com/docs/v3/Plugins/Flip Then you can start by using ScrollTrigger callbacks to create those Flip animations like this: https://codepen.io/GreenSock/pen/ZEmQBQg Hopefully this helps. Happy Tweening!

Hi, I tested your example in the debug URL (no iframes) on an android phone and an iPad: https://cdpn.io/pen/debug/WNLgLxY And it works pretty much the way it should. Finally these are redundant: let horPos = Math.sqrt(self.deltaX * self.deltaX) let verPos = Math.sqrt(self.deltaY * self.deltaY) Multiplying something by itself and then getting the square root of that result is the initial value: a * a = a2 Math.sqtr(a2); // -> a Math.sqtr(a * a); // -> a So you can just use self.deltaX and self.deltaY and you'll get the same value without wasting the extra CPU cycles to perform the calculations. Hopefully this helps. Happy Tweening!

Hi, In your codepen demo you are not creating the ScrollTrigger animations for the new elements being added. If you check the demo I posted you can see that after adding the new elements to the DOM the code creates the new ScrollTrigger instances using ScrollTrigger batch: function createBatch(target) { ScrollTrigger.batch(target, { //interval: 0.15, onEnter: show, }); } const newContent = $.parseHTML(ajaxitem); jQuery(".container").append(newContent); // Create a new batch just for the new content createBatch(newContent); ScrollTrigger.refresh(); You can add the new elements with a custom class and create the batch just for those targets. Unfortunately we don't have the time resources to provide general consulting or create custom solutions for our users in these free forums. If you check the ScrollTrigger docs for batch you'll see some examples there that can help you as well: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch() I'd recommend you to start by adding some elements manually with a button or something like that in order to make the whole add-elements/create-batch/refresh-ScrollTrigger flow working first and then add the ajax part. Hopefully this helps. Happy Tweening!

Hi, This is mostly a faulty logic issue that clearly stems from here: if ( index < arrCases.length - 1 ) { tl.to(`#case${index + 1}`, { yPercent: 75 }, `case${index}` + "-=2"); } For loops is always better to use an array of DOM elements created with GSAP's toArray() utility method: https://greensock.com/docs/v3/GSAP/UtilityMethods/toArray() And run a conditional check if an element with that index value exists. Another option is to check this has well: if ( index < arrCases.length - 1 && arrCases[index + 1] ) { tl.to(`#case${index + 1}`, { yPercent: 75 }, `case${index}` + "-=2"); } Finally your buttons are not working since you are using <a> tags, is better (for codepens at least) to just use buttons. Hopefully this helps. Happy Tweening!

Hi, I don't have a lot of time to dig into this now, but most likely you're looking at staggers or delay with random values: https://greensock.com/docs/v3/Staggers Have a look at that link and see if you can reduce your demo even further, no need for a bunch of images, just some colored divs would be more than enough. Hopefully this helps. Happy Tweening!

Hi, This demo by @Carl should be a good starting point: https://codepen.io/snorkltv/pen/oNQJwzZ Hopefully this helps. Happy Tweening!