Rodrigo

Hi, If you have no scrolling then ScrollTrigger is not going to be super useful, right? What you need is the Observer Plugin: https://greensock.com/docs/v3/Plugins/Observer Here is an example: https://codepen.io/GreenSock/pen/XWzRraJ You can plug the Observer callbacks in order to update the progress of the animation and the Draggable instance. Also you can use the Vertical Seamless Loop helper function: https://codepen.io/GreenSock/pen/MWXPgKm Here is a working example in a React app: https://stackblitz.com/edit/vitejs-vite-nuat5p Hopefully this helps. Happy Tweening!

Hi @essequiel and welcome to the GreenSock forums! Draggable does not have a snap-on-release functionality, just the live snap one (as you already discovered). In order to use an on release snap, you need to integrate the Inertia Plugin, which is a Club GreenSock benefit: https://greensock.com/docs/v3/Plugins/InertiaPlugin You can try all the bonus plugins in Codepen forking this one: https://codepen.io/GreenSock/pen/aYYOdN And you can try them locally and on Codesandbox and Stackblitz using the gsap-trial package: https://www.npmjs.com/package/gsap-trial Here is a fork of your example (I updated the versions of GSAP and React) using the Inertia Plugin: https://codesandbox.io/s/gsap-playground-forked-9cxn9q?file=/src/index.js Finally when it comes to using GSAP in React, GSAP Context is your best friend since it allows you to sope your selectors to a specific ref in your component, super easy cleanup and many other cool things. I'd strongly recommend you to take a peek at the resources in this page: Hopefully this helps. Happy Tweening!

Hi, In that case you have to import GSAP on your script tags. Here is a Nuxt2 & GSAP starter that you can follow to avoid that error. Just don't use this.$gsap on your script and it should be fine: https://stackblitz.com/edit/nuxt-starter-xvx9ux?file=README.md As for he mouse follow part of it, use quickTo(): https://greensock.com/docs/v3/GSAP/gsap.quickTo() Hopefully this helps. Happy Tweening!

Hi, I believe the issue could be on your CSS setup. In this one everything works OK and the CSS is super simple, no grid or anything like that, just images stacked on top of each other and let GSAP run some magic to give them different sizes and positions: https://codepen.io/GreenSock/pen/abaQdwe I used the same setup in a React app (I don't know if you'll be using React or another framework): https://stackblitz.com/edit/vitejs-vite-nuat5p?file=src%2FApp.jsx Hopefully this helps. Happy Tweening!

Hi @Vincent07 and welcome to the GreenSock forums! It seems to me that you're using the syntax for accessing some Nuxt/GSAP plugin. Are you 100% sure that you installed the plugin and added it to your Nuxt config file? Normally in Vue/Nuxt you have to import GSAP into your files, but if you want to avoid that you can follow the instructions @iotron shared in this thread: Finally if you keep having issues please fork this Nuxt3 starter template in order to show us the problems you're having: https://stackblitz.com/edit/nuxt-starter-khrgsj Hopefully this helps. Happy Tweening!

Hi, Is really hard to debug live sites since we can't test the code and see what could be the issue. A few pointers: You're using version 3.11.4, try updating to 3.11.5 and see how it works. Try without the anticipate pin You mention that you can't replicate this in Codepen. That tells us that something else in your setup is causing this. If none of the above solves the issue, start removing the other sections or features one by one until it works and you'll know where to look at. Sorry I can't be of more assistance. Happy Tweening!

Hi @Nelou and welcome to the GreenSock forums! You can use preventOverlaps in your ScrollTrigger configuration: for (let i = 0; i < sectionArray.length; i++) { let tl = gsap.timeline({ scrollTrigger: { trigger: sectionArray[i], toggleActions: "restart none reverse none", start: '125% top', end: '125% top', preventOverlaps: true, // <- HERE id: 'animate '+containerArray[i]+" & "+containerArray[i+1], markers: true, } }); } You can read more about it here: https://greensock.com/3-8#preventOverlapsAndFastScrollEnd Be sure to watch @Carl's great video, which explains in details how it works. On top of that, right now you have a very convoluted setup. Since every section has only one child element, why are you running two loops? This could be simplified quite a bit by running just one loop and selecting the child element of each parent section. Also I'd try to create just a single ScrollTrigger instance for each section and run the animation on that. As for the resize event issue, it seems that the order you're creating the ScrollTrigger instances is what's causing those problems. I couldn't tell you exactly why, but creating the parent containers ScrollTriggers after the other ones seems to resolve the issue. Is a bit odd since the parent element is being pinned but without pin spacing, so that shouldn't mess the calculations ScrollTrigger makes for the other instances, but apparently it does, so this seems to work: // Run child sections loop first for (let i = 0; i < sectionArray.length; i++) { } // Run parent sections loop after for (let i = 0; i < containerArray.length; i++) { } Hopefully this helps. Happy Tweening!

Hi, Since this depends on opening a modal, just use the events that open/close the modal to restart/pause the timeline. This scenario actually makes things even simpler: https://codepen.io/GreenSock/pen/eYLQmwO Hopefully this helps. Happy Tweening!

Hi, There are a few issues here. First the start and end points are kind of weird, if you check the example you'll see that the end marker is above the start marker, but it kind of still works. Second you're not using GSAP Context and doing proper cleanup in your effect hook, which is especially problematic using from instances. In React strict mode the effect hooks have a double call as explained here: https://greensock.com/docs/v3/GSAP/gsap.context() This seems to work as expected: https://stackblitz.com/edit/vitejs-vite-oqdyq4?file=src%2FApp.jsx&terminal=dev Hopefully this clears things up. Happy Tweening!

Hi @Abdo2000 and welcome to the GreenSock forums! Those effects can be done with ScrollTrigger: https://codepen.io/GreenSock/pen/oNwmPmY https://codepen.io/GreenSock/pen/OJzZpVZ Then you can add ScrollSmoother to the mix and it looks even better: https://codepen.io/GreenSock/pen/PoOpobM https://codepen.io/GreenSock/pen/bGaWjpw ScrollSmoother is a benefit of Club GreenSock members though, but is worth exploring all the perks and tools you get. For the mouse follow animation this is a good starting point: https://codepen.io/GreenSock/pen/xxpbORN Also check this thread: Finally, if you're just starting with GSAP, I would start with some simple things and then move up to more complex animations. If you get stuck and have any GSAP related question, let us know and don't forget to include a minimal demo. Happy Tweening!

Hi @Mohammed Sameeh and welcome to the GreenSock forums! You could create an extra ScrollTrigger instance that pins the container and not pin the container in the one that is moving the panels. This seems to work the way you intend: useLayoutEffect(() => { let ctx = gsap.context(() => { const pixelsPause = 300; let panels = gsap.utils.toArray(".panel"); gsap.to(panels, { xPercent: -100 * (panels.length - 1), ease: "none", scrollTrigger: { trigger: slider.current, scrub: 1, snap: 1 / (panels.length - 1), start: `top+=${pixelsPause} top`, end: () => "+=" + window.innerWidth * panels.length, markers: { startColor: "fuchsia", endColor: "fuchsia", indent: 200 }, }, }); ScrollTrigger.create({ trigger: slider.current, end: () => "+=" + (window.innerWidth * panels.length + pixelsPause), markers: true, pin: true, }); }, component); return () => ctx.revert(); }); The value at the start point of the first ScrollTrigger and the end point of the second ScrollTrigger are the ones that sets how long the user will scroll in pixels before the horizontal animation starts. Is very important that they match so is better to use a constant. Here you can see it in action: https://codesandbox.io/s/gsap-react-horizontal-scroll-forked-zw6qy4?file=/src/scenes/Scene.jsx Hopefully this helps. Happy Tweening!

Hi, Sorry to hear that the issues are still there. Unfortunately if the codepen examples work, that means that something else in your setup is breaking this. If I was you I would remove everything except the header and the footer and add some dummy elements before and after the horizontal section. Then start adding one section at a time and when it breaks, you'll find the culprit of your troubles and will be able to isolate what's causing the issue. Good luck with your project! 👍 Happy Tweening!

Hi, You'll have to find a package that splits the text. Then you'll have set the absolute position on one of them by hand and create the animation. I know there are a few options out there, but I don't recall the exact names, so you'll have to google for those. Hopefully at some point you can afford being a Club GreenSock member since the perks are really awesome and you'll get your money back with one or two paid projects (normally just one short project is enough to pay for a year subscription). Happy Tweening!

Hi @alechance and welcome to the GreenSock forums! First thanks for being a GreenSock Club member and supporting GreenSock! 🥳 I assume that there is some method, event handler or user interaction that adds/removes that particular class on the images container. So you should use the same event/method to pause the timeline and then resume it. If that's the case what you could do is add all the instances to a master timeline and pause/play that one based on that input. Something like this: https://codepen.io/GreenSock/pen/XWPxEpE I'm not all that familiar with advanced staggers for this particular cases. I'm an old fashioned guy that gets along very well with loops, so I created everything inside a loop. Also I added some code to pause the master timeline only after an animation is completed, so it doesn't look odd. Hopefully this helps. Happy Tweening!

Hi, @_Greg _ is right a combination of SplitText and ScrollTrigger can do exactly that: https://codepen.io/GreenSock/pen/mdKWBmm Hopefully this is enough to get started. Happy Tweening!