Rodrigo

Hi @Francis Paul Musango and welcome to the GreenSock forums! Is really hard for us to do much without a minimal demo. We also have a collection of starter templates using GSAP and React here: https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters Also when using GSAP in React environments, GSAP Context is the best friend you can have: https://greensock.com/docs/v3/GSAP/gsap.context() Also check the resources in this page to better learn how to use GSAP in React apps: Finally, despite not providing a minimal demo and due to the fact that your question was clear in terms of what you are trying to do and that achieving that is not extremely complicated I created this simple example: https://codepen.io/GreenSock/pen/eYbWqwE In the future though, do your best to provide a minimal demo that clearly illustrates what you're trying to do and the problems you're facing. Hopefully this helps. Happy Tweening!

Hi, In your script tags you have an extra slash: <script src="/gsap//minified/ScrollSmoother.min.js"></script> <script src="/gsap//minified/MorphSVGPlugin.min.js"></script> <script src="/gsap//minified/SplitText.min.js"></script> But the main reason is this: var israelflagfix = ScrollTrigger.create({ trigger: "#part1", start: "top top", end: "bottom +=50%", endTrigger: "#part1", pin: "#israelflag", // pinspacing: false, markers: false }); console.log(israelflagfix); gsap.fromTo( ".israelflag_paths", { drawSVG: "0%" }, { scrollTrigger: { trigger: "#part1", start: "10% 80%", end: "40% 90%", endTrigger: "#part1", containerAnimation: israelflagfix, // HERE scrub: 1, markers: false }, drawSVG: "100%" } ); A Container Animation must be a GSAP Tween or Timeline instance. Right now you're passing a ScrollTrigger instance in almost every other ScrollTrigger you are creating. As soon as you comment that out the error is gone. In order to learn what Container Animation is and how it works please check this Blog Post: https://greensock.com/3-8#containerAnimation Also from the ScrollTrigger docs: containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a demo here and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. Is states there that the type has to be a Tween|Timeline, not a ScrollTrigger instance. Finally the reason you weren't seeing the error in the older version is because Container Animation was not introduced yet, so ScrollTrigger was just ignoring that configuration option. Hopefully this clear things up. Happy Tweening!

Hi @ceneuve and welcome to the GreenSock forums! Indeed is not very clear to me exactly what is the issue here. By looking at your codepen example, the only GSAP code I found: gsap.to(window, { duration: currentDuration, scrollTo: { y: currentPosition }, ease: "slow(0.7, 0.7, false)", onComplete: () => { isAnimating = false; // Establecer que la animación ha terminado } }); Is doing exactly what is supposed to do so maybe I'm missing something here ?‍♂️ Also I noticed you are using JS to apply different styles in different screen sizes. Why not just use CSS Media Queries? https://developer.mozilla.org/en-US/docs/Web/CSS/@media Based on the example you have you can look at using ScrollTrigger and Observer in combination with the ScrollTo Plugin as well: https://greensock.com/docs/v3/Plugins/Observer https://greensock.com/docs/v3/Plugins/ScrollTrigger Is worth mentioning that the Observer Plugin is baked into ScrollTrigger, so you don't need to add that file or link as well, ScrollTrigger should be enough: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.observe() If you keep having issues please be very specific regarding what you want to achieve, what is not working and make sure that your minimal demo (please keep it as minimal as possible) reflects that. Also if it helps clarifying the situation, include a link that shows the functionality you're trying to achieve. Hopefully this helps. Happy Tweening!

Hi, If you want to start every line 0.3 seconds apart of each other, first create a SplitText for the paragraph using just lines and a main timeline. Then loop through those lines and create a new SplitText instance in order to split every line into characters. Then add an instance to the timeline for each line and use the position parameter to start each instance 0.3 seconds after the previous one. const split = new SplitText("p", { type: "lines" }); const tl = gsap.timeline({ paused: true }); split.lines.forEach((line, i) => { const lineSplit = new SplitText(line, { type: "chars" }); tl.from( lineSplit.chars, { y: 25, opacity: 0, stagger: 0.025 }, i * 0.3 ); }); tl.play(); Here is a simple example: https://codepen.io/GreenSock/pen/YzdVdKe Hopefully this helps. Happy Tweening!

Hi, I'm far from being a CSS wizard, so this is the best solution I can come up with: https://codepen.io/GreenSock/pen/PoXmxzJ Is not elegant but it works ?‍♂️ Hopefully this helps. Happy Tweening!

Hi @herougan and welcome to the GreenSock forums! It seems that you are another victim of React's doble effect call on Strict Mode: React 18 runs in "strict" mode locally by default which causes your useEffect() to get called TWICE! Very annoying. It has caused a lot of headaches for a lot of people outside the GSAP community too. .from() tweens use the CURRENT value as the destination and it renders immediately the value you set in the tween, so when it's called the first time it'd work great but if you call it twice, it ends up animating from the from value (no animation). It's not a GSAP bug - it's a logic thing. For example, let's say el.x is 0 and you do this: useEffect(() => { // what happens if this gets called twice? gsap.from(el, {x: 100}) }, []); The first time makes el.x jump immediately to 100 and start animating backwards toward the current value which is 0 (so 100 --> 0). But the second time, it would jump to 100 (same) and animate back to the current value which is now 100 (100 --> 100)! See the issue? In GSAP 3.11, we introduced a new gsap.context() feature that solves all of this for you. All you need to do is wrap your code in a context call, and then return a cleanup function that reverts things: // typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start. useLayoutEffect(() => { let ctx = gsap.context(() => { // all your GSAP animation code here }); return () => ctx.revert(); // <- cleanup! }, []); One of the React team members chimed in here if you'd like more background. This seems to work in the way you intend: useEffect(() => { const ctx = gsap.context(() => { gsap .timeline({ scrollTrigger: { trigger: '.blinder__image--dark', start: 'top 0%', end: () => `+=${blinder_height}vh`, scrub: true, pin: '.blinder__cover--left', pinSpacing: false, }, }) .fromTo( '.blinder__cover--left', { opacity: 0.5 }, { opacity: 0.1, xPercent: 50, } ); gsap .timeline({ scrollTrigger: { trigger: '.blinder__image--dark', start: 'top 0%', end: () => `+=${blinder_height}vh`, scrub: true, pin: '.blinder__cover--right', pinSpacing: false, }, }) .fromTo( '.blinder__cover--right', { opacity: 0.5 }, { opacity: 0.1, xPercent: -50, } ); gsap.timeline({ scrollTrigger: { trigger: '.blinder__image--dark', start: 'top 0%', end: () => `+=${blinder_height}vh`, scrub: true, pin: true, markers: true, }, }); }); return () => ctx.revert(); }, []); I recommend you to check the resources in this page: We also have a collection of starter templates using GSAP and React: https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters Hopefully this helps. Happy Tweening!

Hi, I had a better look at this and it seems to me that the issue could be related to some odd way Nuxt is handling routing. I tried the watcher approach but watchers don't fire after the unmount hook has been triggered, so the only way I found to make it work is to add a delay to the revert method in the unmount hook that is equal to the overlay in animation: let ctx; // later this is the GSAP Context instance of this page onUnmount(() => { // The duration of the delayed call is equal to // the duration of the overlay in animation gsap.delayedCall(0.6, () => { ctx && ctx.revert(); }); }); This prevents the issue from happening. Is ugly and a hack more than a robust solution and I definitely don't like it but so far is the only thing that seems to be working. Of course in your layout you can export the duration of the overlay animation in order to not hard code it on every page or even further you can export a helper method that reverts the context you pass as an argument and import the duration in that particular file, then on every page import that helper method to run it on the unmount hook. I'll update the example and let you know about it. Finally in order to confirm this, I'll create an example using Vue and Vue Router in order to see if the result is the same or not. That should confirm if this is a Vue issue or Nuxt issue. Please stand by and thanks for your patience. Happy Tweening!

Hi, You could wrap the entire content of that page/route in order to pin that and avoid any space added by the pin space added by ScrollTrigger, like that it doesn't matter what the CMS throws at you, pinning the entire wrapper shouldn't cause that particular issue. Like the second example. This sounds really odd to be honest. Normally DOM elements have an auto height which basically stretches to the height of it's child nodes: https://developer.mozilla.org/en-US/docs/Web/CSS/height#formal_definition So there shouldn't be any space especially if anything after that particular element is below the fold. It seems to me that maybe some CSS in your project should be reviewed. Good luck with your project! Happy Tweening!

Hi, It can definitely be done but not without some effort. You'd have to bake in a similar approach in your project. Unfortunately that's beyond the help we can provide in these free forums since we don't have the time resources to tackle such complex task. I would suggest you to contact us for paid consulting or post in the Jobs & Freelance forums, but most likely you will spend more money on paying someone to create such feature than in a Club GreenSock membership that would give you access to all the bonus plugins for a full year, which normally pays itself with one or two projects, then is all profits. Good luck with your project! Happy Tweening!

Hi, You could check these threads as well: You might already seen them, but just in case. Happy Tweening!

Hi, That is related to the fact that the element being pinned contains just the images. In order to make it work the way you intend you'd have to wrap the element with the images and the element after that in the same parent and pin that particular parent element, as shown in these examples: https://codepen.io/GreenSock/pen/LYMYYEL https://codepen.io/GreenSock/pen/qBLRzVX Hopefully this helps. Happy Tweening!

Hi @Semih and welcome to the GreenSock forums! I'm not sure I follow exactly what the issue is here. In your demo everything seems to be working as expected, based on the code you're providing. You mention React but there is no React code in your example, you could fork this starter template in order to create your demo in React: https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters Also I strongly recommend you to check the resources in this page: Finally when using GSAP in React environments we recommend using GSAP Context always as it saves you from a lot of troubles: https://greensock.com/docs/v3/GSAP/gsap.context() Hopefully this helps. Happy Tweening!

Hi, Maybe something like this could be a good starting point: https://codepen.io/GreenSock/pen/yLjdLgK https://codepen.io/GreenSock/pen/MWzeJow Hopefully this helps. Happy Tweening!

Hi, Maybe this example can provide a good starting point for what you're trying to do: https://codepen.io/GreenSock/pen/qBawMGb Hopefully this helps. Happy Tweening!

Hi, Another alternative could be to use the onLeave callback in ScrollTrigger in order to animate the text as you need. @nico fonseca created this awesome example some time ago: Here is an isolated codepen of just the circular text (again all the credit is for Nico): https://codepen.io/rhernando/pen/mdGzwQV Hopefully this helps. Happy Tweening!

Hi @maxmal and welcome to the GreenSock forums! The main issue here is the fact that you are animating the same element that you are using as a trigger. Is highly recommended to not do that, especially since you are animating that element in the Y axis, which can cause issue with ScrollTrigger's calculations. Here is a fork of your codepen example: https://codepen.io/GreenSock/pen/rNomeKo Also you might want to check this example as it provides a different approach to this behaviour https://codepen.io/GreenSock/pen/eYjoOEW Hopefully this helps. Happy Tweening!

Hi, There is definitely something wrong in your demo that is not really related to GSAP itself but how you're setting things up. Here is a super simple example that is working as it should: https://stackblitz.com/edit/vitejs-vite-2mu48z Unfortunately we don't have the time resources to o through complex demos and find specific issues and/or problems in them, since is beyond the help we can provide in these free forums. I strongly recommend you to get your demo working in the simplest possible way first and then start adding other parts to it. Hopefully this helps. Happy Tweening!

Hi, The problem is that due to the way these frameworks handle routing, the load event on the window object runs only once, that's why you're seeing this working only in the first run. In order to work every time your component is mounted, you'll have to check for all the images to be loaded instead of using the window load event and create some state property or check method to know how many images have been loaded. When all the images are loaded or returned a loading error, then you'll be able to create your horizontal loop instance correctly. Hopefully this helps. Happy Tweening!

Hi Your custom script is being loaded before the bundle file. The bundle file should be a dependency of your custom file as well as jQuery. Give that a try and let us know how it works. Hopefully this helps. Happy Tweening!

Hi, Actually it seems that you tried what I mentioned but you definitely didn't read the articles in the page I linked in my previous post. You have your timeline constructor in the outer scope of your component. Any re-render of the component will reset that particular instance and you're adding animations to it in the use effect. When working with React ALWAYS use GSAP Context as I also mentioned in my previous post. Create all your GSAP instances (Tweens, Timelines, ScrollTrigger, Draggable, etc) inside a GSAP Context instance and revert it on the cleanup phase of the useEffect/useLayoutEffect hooks. Unfortunately we don't have the time resources to go through all the code in your example, but there is definitely something in it that is creating this issue. Here is a super simple example that doesn't return any error and the Draggable green box works: https://stackblitz.com/edit/nextjs-qhrskj?file=pages%2Findex.js Hopefully this helps. Happy Tweening!

Hi, Your demo is a bit difficult to follow as I had to go through every single file trying to find where exactly the pertinent GSAP code is. In the future please do your best to simplify your examples to one or two files or point us directly to where we should be looking. You have this in your helper function: element.scrollIntoView({ behavior: 'smooth' }); So that will do a smooth scroll to the position the top of that element is. I tried removing it without any success and then tried the ScrollTo plugin using a set instance and that didn't work neither. Strangely enough it does work in this example: https://codepen.io/GreenSock/pen/oNJZXwX Honestly I couldn't tell you without diving into every file of the project and creating a similar project locally to test. Unfortunately we don't have the time resources to provide free general consulting for our users. You can contact us for that type of work or post in the Jobs & Freelance forums in order to get help there. Hopefully this helps. Happy Tweening!

Hi, I'm not sure I follow 100% what you mean by this. ScrollTrigger has to do a few operations when the browser window resizes. After all that is completed and the instances' start and end points are updated, ScrollTrigger checks for the current scroll position and updates all the instances accordingly. Since you have scrub: true the update will be immediately. If you want for it to be smoother, you can use a number in scrub instead of the boolean. Finally you can change your code to this: scrollTrigger: { id: "NavTop", markers: true, trigger: "#intro", start: () => "bottom "+intro.offsetHeight, end: () => "+="+intro.offsetHeight , scrub: true, invalidateOnRefresh: true, onLeaveBack: () => document.getElementById("nav").style.removeProperty("top"), } That onLeaveBack callback does the same our onUpdate does, but instead of running all that logic on every update, it only changes the style of the element directly once, no need for conditional checks and more expensive code. Hopefully this helps. Happy Tweening!

Hi @mhkey and welcome to the GreenSock forums! I'm not 100% sure I follow exactly what you're trying to do here, but it definitely looks like an issue to add an event listener to ScrollTrigger every time the iframe size changes. Instead of adding an event listener to the refresh init, something you already did somewhere else in your code, simply call ScrollTrigger.refresh() in your resize observer's callback: myframe = $("#app-booking-container iframe")[0]; if ( $("#app-booking-container iframe").length ) { let resizeObserver = new ResizeObserver(() => { ScrollTrigger.refresh(); }); resizeObserver.observe(myframe); } Even further you could call the setHeight method before refreshing ScrollTrigger: myframe = $("#app-booking-container iframe")[0]; if ( $("#app-booking-container iframe").length ) { let resizeObserver = new ResizeObserver(() => { setHeight(); ScrollTrigger.refresh(); }); resizeObserver.observe(myframe); } Unfortunately I have no other suggestions as tinkering with iframes is something that I have always avoided, it's like opening pandora's box and breaking all hell loose . I only compare it with messing with tables Hopefully this helps. Happy Tweening!

Hi, In order to add to @alig01's great advice, there are some examples in the forums of using Three Fiber with GSAP: So as you can see GSAP can be used with RTF without any issues. Check the examples in those threads to see working code. Hopefully this helps. Happy Tweening!

Hi @kitzmiller and welcome to the GreenSock forums! It seems to me that you're not properly compiling and bundling your files. In order to compile and bundle NPM modules and your custom JS Module files (where you import GSAP and other packages, export your own constants, variables, methods, objects, etc. to make them accessible in other modules) you need to run a bundler like Webpack, Vite or Parcel, just to name a few. It seems to me that the error stems from that. If you want to use imports and module type scripts without using a bundler, you can fetch the files from Skypack CDN: import gsap from "https://cdn.skypack.dev/gsap"; console.log(gsap.version);// -> 3.12.2 Hopefully this helps. Happy Tweening!