Rodrigo

Yep that I can see. The problem is that I can't seem to understand what's the issue you're having or what you are intending to do, that's why I asked to be as specific as possible about your objective here. Happy Tweening!

Hi, The issue is that your layoutEffect doesn't have a dependencies array, so it runs every time the component is rendered: useLayoutEffect(() => { }, []);// -> Emtpy dependecies array Also you are not doing proper cleanup in the return function of your effect hook: useLayoutEffect(() => { const ctx = gsap.context(() => {}); return () => ctx.revert(); // <- Cleanup!! }, []); This seems to work: useLayoutEffect(() => { const panels = panelsRefs.map((ref) => ref.current); const totalPanels = panels.length; const ctx = gsap.context(() => { gsap .timeline({ scrollTrigger: { trigger: wrapRef.current, start: "top top", end: "+=" + (100 * totalPanels + 1) + "%", scrub: true, pin: true, markers: { startColor: "white", endColor: "white", }, }, }) .to(wrapRef.current, { clipPath: "circle(71% at 50% 50%)", duration: 1 / totalPanels, }) .to(panels, { xPercent: -100 * (totalPanels - 1), duration: 1, ease: "none", }); }); return () => ctx.revert(); }, []); Finally take a look at the resources in this page in order to learn how to use GSAP in React/Next projects: https://gsap.com/resources/React Hopefully this helps. Happy Tweening!

Hi @DesignEbiz, Please don't post in other threads in order to ask for help in an ongoing thread. On top of that you didn't provided a minimal demo in your other threads and we don't have the time resources to create custom solutions or solve complex logic issues for our users. Please read the forums guidelines: Happy Tweening!

Hi, Maybe you can give the Horizontal Endless Loop a try: https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/ Here is an example that uses Draggable and Inertia Plugin: https://codepen.io/GreenSock/pen/gOvvJee With that you can use the breakpoint in your setup to play/pause the timeline returned by the helper function. Hopefully this helps. Happy Tweening!

Hi, The problem is here: function resize() { slideWidth = slides[0].offsetWidth; totalWidth = slideWidth * numSlides; if (isMobile.matches) { animation.progress(0).kill(); // PROBLEM!! draggable.startProgress = animation.progress(); } } When you pass the breakpoint you setup in your matchmedia instance, you are actually killing the animation. When you kill a GSAP instance, that is gone, kaput, animation-no-more and ready for garbage collection. So while the Draggable instance is actually working there is no animation to update through the Draggable instance. Removing the kill() method actually works: https://codepen.io/GreenSock/pen/ZEwzEKj Finally you might want to check GSAP MatchMedia: https://gsap.com/docs/v3/GSAP/gsap.matchMedia() Hopefully this helps. Happy Tweening!

Hi, I'm not seeing any blur in the image, maybe I'm missing something here 🤷‍♂️ Have you tried instead of using the SVG on an image tag, just use the SVG paths in your code? Since you already have the image data as SVG paths I'd go that route. That most likely will prevent any blurriness in your element. Happy Tweening!

Hi, Unfortunately this has nothing to do with GSAP, as was already explained. This is about video compression and encoding, and the way browser rendering works. Is not just about size in terms of how many MB the video is but keyframes. Please read the information in this threads: We're sorry that you are experiencing this problem and I wish there was something we could do to help, buts as mentioned this has nothing to do with GSAP so there is nothing we can do. Please read the forums guidelines: Good luck with your project! Happy Tweening!

Hi, I think you are overcomplicating this. There is no need IMHO to create such convoluted setup, just create a single timeline that first animates the entire's section clip-path property and then creates the horizontal animation. Something like this: https://codepen.io/GreenSock/pen/eYbqrLZ Hopefully this helps. Happy Tweening!

Hi, You mean something like this? https://codepen.io/GreenSock/pen/ExGqLgP If not please be super specific about what you intend to do. Happy Tweening!

Hi @Hanan1487 and welcome to the GSAP forums! Pinning is not something supported when creating fake horizontal scroll animations for logic reasons, because you're not actually scrolling horizontally, you are using GSAP to move on the X axis some elements, nothing more, so in order to resemble pinning, you have to pause that motion on the X axis to make other animations and then resume that motion. In that particular site what's happening is that the container of those videos is being animated on the X axis, not pinned. I think a good fit for this would be Container Animation: https://codepen.io/GreenSock/pen/WNjaxKp You can read more about it here: https://gsap.com/blog/3-8#containeranimation Hopefully this helps. Happy Tweening!

Hi, Maybe you could try this approach by @Carl in order to create your seamless loop: https://www.snorkl.tv/greensock-staggers-with-seamless-loops/ He even created a video explaining how everything works. Hopefully this helps. Happy Tweening!

That most likely has to do with the amount of time of scroll animation. Longer animations can cause those jumps. One way is to add will-change: transform to the images and see if it improves that. Hopefully this helps. Happy Tweening!

Hi, It has to go in the snap function you have here: ScrollTrigger.create({ // you can add a trigger and start/end values if you'd like to limit the snapping to only part of the page. snap(progress, self, direction) { let totalDistance = self.end - self.start, snapProgress = snaps.map((v) => v / totalDistance); return ScrollTrigger.snapDirectional(snapProgress)(progress, self.direction); } }); In that function you have to return a progress value (between 0 and 1) where ScrollTrigger will eventually land the scroll position. That's what you'll have to figure out based on the points you want your ScrollTrigger instance to snap. Happy Tweening!

Hi, That looks good to me. Without knowing the rest of your code, I don't think there's really any upside in creating a variable for the timeline, unless you need that reference later in your code. Happy Tweening!

Hi @sunrisejoz and welcome to the GSAP forums! I think in this cases is better to create a single timeline in a parent component and either pass the timeline to it's child components in order to add instances to it, use a callback to populate the timeline or use forwardRef in order to bring refs of your child components into a parent one and create the timeline there: https://react.dev/reference/react/forwardRef#forwardref Those different approaches are explored in our Advanced Techniques article: https://gsap.com/resources/react-advanced Hopefully this helps. Happy Tweening!

Hi, There are two issues in your setup. First, you are creating and reverting a GSAP Context in your effect hook, but the function you are using is not actually returning a GSAP instance, therefore the Flip animation doesn't get reverted when the GSAP Context instance does. Two, you have a tween with a ScrollTrigger configuration in it, on a timeline that also has a ScrollTrigger configuration, that's a big logical issue as explained here: https://gsap.com/resources/st-mistakes#nesting-scrolltriggers-inside-multiple-timeline-tweens Here is a fork of your codepen: https://codepen.io/GreenSock/pen/jOXgGWq Hopefully this helps. Happy Tweening!

Hi, I think your example is too convoluted and that you are extremely over-engineering this. For the time being you should completely forget about ScrollTrigger and focus on creating a single timeline that animates the logo in the way you want. Then you can create three different ScrollTrigger instances that play/pause the logo animation using the onEnter/onLeave/onEnterBack/onLeaveBack callbacks. You can use addPause() in order to pause your timeline between sections and use labels as well in order to tell ScrollTrigger to play/reverse the timeline from a specific point: https://gsap.com/docs/v3/GSAP/Timeline/addPause() https://gsap.com/docs/v3/GSAP/Timeline/addLabel() I made a fork of your codepen without any ScrollTrigger instances and is quite clear that your animation is not working as expected, looks really weird especially when reversing: https://codepen.io/GreenSock/pen/KKbOvvO IDK if that is the issue you have in your setup, but unfortunately we don't have the time resources to do all of this for you. Hopefully this helps. Happy Tweening!

Hi @Deepak Gangwar and welcome to the GSAP forums! Thanks for the kind words on the new site, is great to hear that users like it! 🥳 I think the best approach is to use the Horizontal Endless Loop helper function: https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/ Then with ScrollTrigger you can use the velocity value to update the timeScale of the timeline returned by the helper function. Something like this: https://codepen.io/GreenSock/pen/WNLVjQQ Hopefully this helps. Happy Tweening!

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/bGOXqZX There is no need to run all that logic on your enter and leave handlers. Keep in mind that running this: const onEnter = () => { if (splitElementRef.current && gridBoxRef.current) { const splitChildren = gsap.utils.toArray( splitElementRef.current.children ); tl.to(gridBoxRef.current, { background: "#212226", duration: 0.3, stagger: -0.05 }); tl.to(splitChildren, { yPercent: -100, stagger: -0.05 }); } }; Adds a those instances to the timeline each time the mouse enters, making the timeline longer and longer, which could cause issues down the line. For this cases is always better to create a single Tween/Timeline and play/reverse it based on the event type. Also you weren't using GSAP Context as I advice you to do. Always use GSAP Context in react and revert it during the cleanup phase of the component. Finally read the resources in this page: https://gsap.com/resources/React Happy Tweening!

Hi, Maybe this thread can provide some good pointers: Keep in mind that pinning is not something supported when creating fake horizontal scroll animations for logic reasons, because you're not actually scrolling horizontally, you are using GSAP to move on the X axis some elements, nothing more, so in order to resemble pinning, you have to pause that motion on the X axis to make other animations and then resume that motion. Hopefully this helps. Happy Tweening!

Hi, You are looking at either scrub or toggleActions. From the ScrollTrigger docs: scrub Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress. Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out. gsap.to(section2Ref.current, { width: "100%", scrollTrigger: { trigger: section2Ref.current, start: "top 80%", end: "top top", scrub: true, markers: true, id: "hero2", }, }); toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none". gsap.to(section2Ref.current, { width: "100%", scrollTrigger: { trigger: section2Ref.current, start: "top 80%", end: "top top", toggleActions: "play none reverse reset", markers: true, id: "hero2", }, }); Hopefully this helps. Happy Tweening!

Hi, I'm afraid that is not possible at the current state of the helper function. Is my understanding that it would require quite a bit of custom logic to achieve that and that is beyond the scope of the help we can provide in these free forums with the limited time we have. We offer paid consulting if you want to contact us. Happy Tweening!

Hi, There are a few issues in your demo. You have just one element being passed to the helper function. While it works it does have a drawback of the element jumping at the end of the animation. It's highly recommended to have at least two elements. Here is an example that shows how to create two different loop instances in opposite directions: https://codepen.io/GreenSock/pen/gOBaGVo Then the procedure is the same, just check for the ScrollTrigger instance's update and direction in order to update their timescale according to that: https://codepen.io/GreenSock/pen/QWQYmaN Hopefully this helps. Happy Tweening!

Hi, Maybe something like this: https://stackblitz.com/edit/stackblitz-starters-b1jmyk?file=src%2FApp.js Hopefully this helps. Happy Tweening!

Hi, I'm afraid that there is not a lot we can do with just a code snippet. Please do your best to create a minimal demo that clearly illustrates the issue your having without copying all your project or entire sections of it. Smaller the demo, faster we can help you. CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: React (please read this article!) Next Svelte Sveltekit Vue Nuxt Also I see that you are using React but you're not using GSAP Context: https://gsap.com/docs/v3/GSAP/gsap.context() Always use GSAP Context in React/Next projects and also take a look at the resources in this page: https://gsap.com/resources/React Happy Tweening!