Rodrigo

Hi, This shouldn't be that complicated: https://codepen.io/GreenSock/pen/XWOJGVV Just play with the tools, check the docs and always use markers in order to understand better how pinning actually works. A marker says far more words than a line of code 😉 Hopefully this helps. Happy Tweening!

Hi @feralroo and welcome to the GSAP forums! Unfortunately I don't have time right now to go through all your code (will circle back to it tomorrow). What I think it could help in the mean time and the route I would go, is to use the add() method to add methods to the GSAP Context instance and perhaps create a more dynamic way to create those animations. Also keep in mind that creating and reverting that GSAP Context everytime the state of the component is updated, probably could be a source of a problem. Definitely create/revert the GSAP Context on an effect hook with an empty dependencies array, and just call a method when the state updates, something like this: const ctx = useRef(); // store the GSAP Context in a ref useEffect(() => { ctx.current = gsap.context((self) => { self.add("animateIn", (param) => {}); self.add("animateOut", (param) => {}); }); return () => ctx.revert(); }, []); useEfefct(() => { // Run your conditional logic here to decide which method call ctx.current.animateIn(activeScene); // or ctx.current.animateOut(activeScene); }, [activeScene]); Finally note that I used useEffect in both cases. I don't see the state update triggering any DOM changes, so I don't think a useLayoutEffect is needed, but you can keep using the useIsomorphicLayoutEffect hook without any issues. Hopefully this helps. Happy Tweening!

Hi, There are a lot of warnings in your live site (GSAP not finding animation targets) and your codepen example doesn't have any CSS and HTML so that clearly is not going to work neither. Please read this in order to learn how to create a minimal demo using Codepen: Happy Tweening!

Hi, Do you created your environmental variable myAuthToken in your Netlify project page? I just created a new Next site deploying from Github using the same .npmrc config and it works: https://github.com/rhernandog/next-netlify-bonus Happy Tweening!

Hi, Indeed a minimal demo would be great to have in this case. The only thing I can spot is that you want to pause the scrolling by adding something that is inside a Timeline that is controlled by a ScrollTrigger instance. That's seems like a logical impossibility to me. I think one approach could be to to prevent the default in the wheel/touch events while that animation happens which could be triggered by the onLeave callback in ScrollTrigger. You should take a look at this example using ScrollTrigger and the Observer Plugin, is not the same but the concept of preventing scrolling for an amount of time is there: https://codepen.io/GreenSock/pen/ExEOeJQ Hopefully this helps. Happy Tweening!

Hi, In that case I would look into using call and addPause methods and two different timelines: https://gsap.com/docs/v3/GSAP/Timeline/addPause() https://gsap.com/docs/v3/GSAP/Timeline/call() So basically create a single timeline for each spritesheet. Something like this: https://codepen.io/GreenSock/pen/zYexZEQ Basically each timeline resumes the other and pauses itself immediately as well. Hopefully this helps. Happy Tweening!

Hi, There are several examples of that in the forums, you can use our search tool to find them. Here are just a few: https://codepen.io/Mohsen-Khakbiz/pen/WNzBrdz https://codepen.io/GreenSock/pen/XWxOwVp https://codepen.io/GreenSock/pen/MWmVwpX https://codepen.io/GreenSock/pen/gOBqgNm Hopefully this helps. Happy Tweening!

Hi, I can't seem to grasp what is the issue you have right now. Your codepen demo in your first post seems to be working using the great suggestions Mitchel already provided. If you're having issues implementing that solution in your project, there could be a lot of factors into that, like HTML structure, CSS styles, other CSS styles from other packages or plugins that interfere with yours, or maybe some other JS that is causing this. If it works like it should in Codepen, most likely this is not something related to GSAP but to other aspects of your project, so there is not a lot we can do on that subject, sorry. If you do have an issue with specific GSAP implementation, please provide a minimal demo that clearly illustrates it. Happy Tweening!

Hi, I haven't had the time to check the external link stuff. For the ScrollTo links this seems to work with this setup: https://codepen.io/GreenSock/pen/RwvNamq Happy Tweening!

Hi, Check this codepen by @PointC as well: https://codepen.io/PointC/pen/mdpKxdb Happy Tweening!

Hi, In terms of the 90 degrees angles IDK how feasible is that without some custom logic. That basically would require to stop the motion tween there, smoothly rotate the arrow, then animate the rest of the path and finally rotate the arrow again. The simplest way I can think about is to split the path you're passing to the MotionPath plugin into two parts. One that has the horizontal and curve sections and a second that has only the vertical straight line. With that you can create a timeline that first moves the arrow in the horizontal straight lines and the curve at the right, then rotates, moves up and then rotates again. Of course everything should have ease: "none" in order to give a seamless integration. Something like this: https://codepen.io/GreenSock/pen/JjxoXjR Hopefully this helps. Happy Tweening!

Hi, A few things. First, I think the the MotionPath Plugin is the best tool for this animation you're trying to do. Right now your setup is quite convoluted and the issues you're seeing mostly come from that. The MotionPath Plugin should simplify this quite a bit: https://gsap.com/docs/v3/Plugins/MotionPathPlugin/ @Carl has a great lesson on how to use the plugin here: Also this demo combined with the basics Carl goes through in the video should provide a solid idea of how to achieve that: https://codepen.io/snorkltv/pen/zYyBKmG Also you are using React. When using GSAP in React/Next projects, always use GSAP Context. Proper animation cleanup is fundamental in React and GSAP Context is ideal for those cases: https://gsap.com/docs/v3/GSAP/gsap.context() Finally take a look at the resources in this page in order to learn how to correctly use GSAP in React projects: https://gsap.com/resources/React Hopefully this helps Happy Tweening!

Hi, Looks good to me. Honestly many times we trap ourselves into convoluted code trying to optimizing it or making it look better. Sometimes less is more and simpler is better 😃 Happy Tweening!

Hi @Ajapro and welcome to the GSAP forums! Maybe something like this could be a good starting point: https://codepen.io/GreenSock/pen/bGzNdMy Hopefully this helps. Happy Tweening!

Hi @anisos, You already asked basically the same question. Please do not create duplicated posts. In the other thread you were provided with some examples that take a similar approach. Unfortunately what you're trying to do is not a simple task and we don't have the time resources to provide fully working apps/examples or debug complex logic issues for our users. We do offer paid consulting services and you can post in the Jobs & Freelance forums in order to get help there. Happy Tweening!

Hi @Ninthony, What exactly you mean by that? The ScrollSmoother Plugin is not actually being used in the latest example Jack added to the thread. The example uses the ScrollTo Plugin in order to animate the scroll position of the window object to the specific scroll position returned by the method used for that. The other thing that could lead you to think that is the fact that the ScrollTrigger configuration uses scrub: 1. This is what the ScrollTrigger docs say about that: 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. Maybe if you change it to scrub: true you'll get the effect you're looking for. If not please provide a minimal demo that clearly illustrates the issue you're having. Hopefully this helps. Happy Tweening!

Hi, The way to go in these cases is animating the clip-path property. You can check the cross or polygon types: https://bennettfeely.com/clippy/ Here are a couple of examples for implementing such animations with ScrollTrigger: https://codepen.io/GreenSock/pen/oNJRjNL https://codepen.io/GreenSock/pen/eYbqrLZ Hopefully this helps. Happy Tweening!

Hi @denniszyche, Sorry for the late response 🙏 I created an example using the latest version of React Router Dom with the latest version of GSAP/ScrollSmoother and can't replicate the issue you mention: https://stackblitz.com/edit/stackblitz-starters-9xvpi2 If you can fork that and make it look like your setup and replicate the issue it'd help us to identify it. Just please remember to keep the demo as minimal as possible. Happy Tweening!

Hi, This is the most basic approach I've seen to something like that: https://codepen.io/antonio78/pen/LYMvOjL After that, as @Shrug ¯\_(ツ)_/¯ mentions, is adding layers of complexity based on what you want to do. Happy Tweening!

Hi, Please don't create duplicated threads. We are keeping track of this one, so updating this should be enough. Thanks! I checked the other thread and I think it would be OK to delete it so we can focus just on this. Please confirm that the other thread doesn't have any information that is not present in this one in order to safely delete it without loosing any critical information about the issue. Circling back to the issue, I see what you mention and I'll look into it, so please be a bit patience while I try to figure a way to make it work. I have pretty good idea of the issue: When the page loads with the particular hash, the browser looks for that element and sets the scroll position accordingly. The problem is that all your elements are in the same vertical position and the scroll position is set there. Granted there is some odd behaviour that I'll look into it but on page load there is no way ScrollTrigger knows exactly where the scroll position should be based on the URL hash. Finally I think this is a far simpler setup for your demo, at least to create the horizontal layering: https://codepen.io/GreenSock/pen/poGzBpB Happy Tweening!

Hi, The demos in this thread should provide a solid starting point: Hopefully this helps. Happy Tweening!

Hi, Yep everything looks right to me, good job! 🙌 Probably there could be other ways to do it, but most likely would be variations of what you have in place already. Happy Tweening!

Hi @jamesstephensaul and welcome to the GSAP forums! Thanks for being a premium user and supporting GSAP! 💚 Unfortunately your demo is not working. Maybe you could try forking one of our Vue3 starter templates from this collection: https://stackblitz.com/@GreenSockLearning/collections/gsap-vue3-starters Happy Tweening!

Hi, This is a fork from a codepen by @Cassie https://codepen.io/GreenSock/pen/eYxOXPP Here is the original one with Flip Plugin magic in it: https://codepen.io/cassie-codes/pen/abyZYym Hopefully this helps. Happy Tweening!

Hi, Jack indeed offers a detailed explanation here: Happy Tweening!