Rodrigo

Hi @Shuvo and welcome to the GSAP forums! Maybe something like this: https://codepen.io/GreenSock/pen/mdjyjYE Hopefully this helps. Happy Tweening!

Hi @hzj and welcome to the GSAP forums! Draggable has the update method for that: https://gsap.com/docs/v3/Plugins/Draggable/update() Hopefully this helps. Happy Tweening!

Hi, I think you are overcomplicating this by using state on a parent component only to pass that state to a second child component. You should use React Context for that instead of use the props-drilling approach: https://react.dev/learn/managing-state#passing-data-deeply-with-context https://react.dev/reference/react/createContext Also the approach of using state to update the mouse follower position. That is completely unnecessary because there is not really need to re-render the component every time the entire component every time the mouse moves, right? I think the approaches in this thread can provide a better starting point for this: The examples there use GSAP quickTo() method: https://gsap.com/docs/v3/GSAP/gsap.quickTo() I think this is a better approach IMHO: import { useEffect, useLayoutEffect, useRef } from "react"; import Styles from "./cursor.module.css"; import gsap from "gsap"; // eslint-disable-next-line react/prop-types function Cursor({ hover }) { const cursorRef = useRef(null); const ctx1 = useRef(null); const cursorSize = 30; const mouseMovehandler = (e) => { const { clientX, clientY } = e; ctx1.current.mouseMove( clientX - cursorSize / 2, clientY - cursorSize / 2 ); }; useEffect(() => { ctx1.current = gsap.context((self) => { const xTo = gsap.quickTo(cursorRef.current, "x", {duration: 0.6, ease: "power3"}); const yTo = gsap.quickTo(cursorRef.current, "y", {duration: 0.6, ease: "power3"}); self.add("mouseMove", (x, y) => { xTo(x); yTo(y); }); const scaleTween = gsap.to(cursorRef.current, { scale: 2, duration: 0.05, paused: true, }).reverse(); self.add("grow", (value) => scaleTween.reversed(!value)); }); window.addEventListener("mousemove", mouseMovehandler); return () => { ctx1.current.revert(); window.removeEventListener("mousemove", mouseMovehandler); } }, []); useLayoutEffect(() => { ctx1.current && ctx1.current.grow(hover); }, [hover]); return ( <div className={Styles.cursor} ref={cursorRef} ></div> ); } export default Cursor; https://codesandbox.io/p/github/insightofakash/imgonhover/csb-rdqyhn/draft/xenodochial-moon The blend mode doesn't work, unfortunately we don't have the time resources to tackle everything, so I'll leave that to you. Hopefully this helps. Happy Tweening!

Hi, A Mitchel mentions the setup in the image is quite different than the codepens you linked and that you should focus on that first and then create the animations and once the animations are working as you expect, only then add ScrollTrigger to the mix: Here are few examples: https://codepen.io/GreenSock/pen/oNQNrQx https://codepen.io/GreenSock/pen/mdjyjYE https://codepen.io/GreenSock/pen/ZExovXw Hopefully this helps. Happy Tweening!

Yeah, that's why I made this suggestion, that is route I'd take: https://codepen.io/GreenSock/pen/JjxdYYO Happy Tweening!

Hi @Waris Khan and welcome to the GSAP forums! I suggest you to take a look at GSAP ScrollTrigger: https://gsap.com/docs/v3/Plugins/ScrollTrigger/ It's GSAP's own scroll-controlling animation tool and works great! Here are a few demos you can look at: https://codepen.io/collection/AEbkkJ Mostly you're looking at using ScrollTrigger with a GSAP Timeline and use the pin feature in combination with scrub. Check the docs (first link in this response) in order to see how everything works. If you keep having issues, please provide a minimal demo that we can take a look at: Hopefully this helps. Happy Tweening!

Indeed but at this point I'm just throwing any idea that comes up 🤷‍♂️ 🫠

Hi, Mainly the issue is that when the effect hook runs for the first time ctx.current is undefined: useIsomorphicLayoutEffect(() => { if (prevActiveScene.current !== null) { tl.current.add(animateOut(prevActiveScene.current)); } // The first time this runs ctx.current is still undefined ctx.current.animateIn(activeScene); prevActiveScene.current = activeScene; }, [activeScene]); Just adding a simple check for the context instance should solve that: useIsomorphicLayoutEffect(() => { if (prevActiveScene.current !== null) { tl.current.add(animateOut(prevActiveScene.current)); } ctx.current && ctx.current.animateIn(activeScene); prevActiveScene.current = activeScene; }, [activeScene]); Hopefully this helps. Happy Tweening!

Hi, This is a logic issue nothing more. If you completely remove GSAP from your code and keep the horizontal sections and use a direct link to one of those sections, the browser will get you to the same scroll position because the position of all those elements relative to the top of the document is the same. The problem you're facing most likely stems from the fact that when ScrollTrigger is ran (which is when the calculations are made in order to add the pinning space and everything else) the browser already sent you to that particular location (the same you get without GSAP and ScrollTrigger, this is why I've been adamant to saying that this is not an issue with ScrollTrigger, but a custom logic stuff). ScrollTrigger just doesn't care about the URL and any hashes in it, it will run and execute it's logic according to what you're giving to it when the page loads. The one idea I have (that I haven't been able to test) is to store your hash sections/links in an array. Since you are running some custom logic to know exactly the scroll position of each section, so you can store that in an array (could be the same array for the hashes). Then after ScrollTrigger is completed check if the URL has a hash and based on that tell ScrollTrigger to take the scroll position to that point or even use the ScrollTo Plugin for that based on the point you already calculated when looping through the links. See how this is more a custom logic thing than a GSAP related one? As you mention I can't see that issue in your demo, so my best guess is that something else in your setup is causing this. If you can't replicate it we simply can't even guess what could be, sorry 🤷‍♂️ Finally this is what I mean when I mention that your current setup is not responsive, I don't know if you have noticed it: https://i.imgur.com/Dt9fERW.mp4 Happy Tweening!

Hi, I just created a new project using the command line you posted and using a valid token I was able to install the GSAP bonus package. Just two things left to test: Create a regular project. Create a folder with any name (is 100% irrelevant), then run this on the terminal: npm init -y Then create the .npmrc file with your token and install GSAP Shockingly. If #1 doesn't work the only guess is that you have a token that is no longer valid installed globally on your system. To check that run the npm config command npm config list, you should get a result similar to this: rodrigo@Rodrigo:~$ npm config list ; "user" config from /home/rodrigo/.npmrc //registry.npmjs.org/:_authToken = (protected) ; node bin location = /home/rodrigo/.nvm/versions/node/v18.15.0/bin/node ; node version = v18.15.0 ; npm local prefix = /home/rodrigo ; npm version = 9.5.0 ; cwd = /home/rodrigo ; HOME = /home/rodrigo ; Run `npm config ls -l` to show all defaults. That first line gives you the route to your global .npmrc file. Open it with your text editor and see if you can find a GSAP token there and compare it with the one in your dashboard. If you have a different one, update it and save the file, then try the empty folder approach in #1. Unfortunately beyond this suggestions I have no idea what else could be wrong TBH, this is the last arrow in my quiver. Hopefully this helps. Happy Tweening!

Hi @N3O and welcome to the GSAP forums! Is really hard for us to debug without a minimal demo, please take a look at this page in order to learn how to create one: Based solely on the description you provide the only advice I can give you is to add position relative to the other elements and see if that helps. Happy Tweening!

Hi, Try deleting your package-lock.json file before installing, but in a 100% fresh project that should work as expected. Happy Tweening!

Hi, That is not really a GSAP feature so is a bit beyond the scope of these forums (we try to keep everything GSAP related here). Some time ago Jack crafted this helper function to stop that event (overscroll) but you could study/extract the code relevant to detect the event when it happens: https://gsap.com/docs/v3/HelperFunctions/helpers/stopOverscroll/ Hopefully this helps. Happy Tweening!

Hi, As Jack mentions ScrollSmoother has an onUpdate callback (like Tween and Timeline instances do) that should be the place to plug your logic. That would be the first thing I'd try in order to update other things: onUpdate Function - a function to call after each time the SmoothScroller updates the position of the content. Keep in mind that you can also keep track of the ScrollSmoother instance's progress as well if you want to use RAF: https://gsap.com/docs/v3/Plugins/ScrollSmoother/progress But honestly, since GSAP ticker already uses RAF it seems like a redundancy and using GSAP Ticker also guarantees that every GSAP instance, ScrollSmoother instance will be 100% in sync as well. Hopefully this helps. Happy Tweening!

Hi, I've read your post a few times and looked at the demo and I'm a bit confused about the specific issue you have. Care to elaborate a bit more about it? Also you are using the Transition hooks for this (after enter and after leave). If you want to preload something in Vue I'd recommend you to do it in the onMounted hook and not the Transition component hooks, once your assets are loaded then you can run your overlay or loader animation and create other GSAP instances. Keep in mind that the Transition hooks run based on the lifecycle of the Transition component and not the assets you might want to preload. https://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram Hopefully this helps. Happy Tweening!

Hi, I'm not sure GIFS allow you that much control: https://stackoverflow.com/questions/39374962/control-gif-animation-with-js-play-stop-play-backwards I think it would be better to use spritesheets like in this example: This thread also offers some good pointers on the subject: If you keep having issues, please post a minimal demo. Happy Tweening!

Hi, In order to use imports like that with the module attribute you have to either use the UMD files you can find in the download files in your dashboard or you can use Skypack like this: <script type="module"> import gsap from "https://cdn.skypack.dev/gsap"; import ScrollTrigger from "https://cdn.skypack.dev/gsap/ScrollTrigger"; console.log(gsap.version); // -> 3.12.2 console.log(ScrollTrigger.version); // -> 3.12.2 gsap.registerPlugin(ScrollTrigger); </script> Hopefully this helps. Happy Tweening!

Hi, You already asked similar questions and the answer basically remains the same. That is not something simple to achieve. I provided an example of the simplest approach to get started with in your previous thread. If you want to use SVG for the masking these demos could prove helpful: https://codepen.io/GreenSock/pen/qBxboNe https://codepen.io/GreenSock/pen/ZEaMOyY https://codepen.io/GreenSock/pen/KKZOYeB https://codepen.io/GreenSock/pen/oNaxdje https://codepen.io/GreenSock/pen/LYeMaJj https://codepen.io/GreenSock/pen/LYmWbbM https://codepen.io/GreenSock/pen/mdKZJVV Also be sure to check the great resources @PointC has here: https://www.motiontricks.com/svg-tutorials/ Hopefully this helps. Happy Tweening!

Hi, There is not a lot we can do without a minimal demo. Please check this: The only thing I know is that videos can act in weird ways on iOS devices, but the issue you describe doesn't sound like is caused by GSAP IMHO. Happy Tweening!

Hi, The id is something that can be added to the ScrollTrigger config object, not the Markers object as shown in this demo: https://codepen.io/GreenSock/pen/XWOJGVV Hopefully this helps. Happy Tweening!

Hi @GABEwasaCREEPER and welcome to the GSAP forums! We definitely have Svelte/SvelteKit on our radar. Is an ecosystem that we heard nothing but good things about and we have a collection of GSAP Starter Templates here in Stackblitz: https://stackblitz.com/@GreenSockLearning/collections/gsap-svelte-starters https://stackblitz.com/@GreenSockLearning/collections/gsap-sveltekit-starters We'll definitely keep your suggestion in our minds and try to create Svelte-specific resources as soon as we can. We just changed our entire site and docs, we're still fine tuning some things and we need to tend to our valued users here in the forums as well, so time is a bit scarce right now, but we'll keep you posted here and be sure to subscribe to our newsletter (at the bottom of this and every page) to get the latest GSAP news! Happy Tweening!

Ahh... OK so that's the issue here! First when you create your project, create your .npmrc file and add your token to it (DO NOT PUSH THIS FILE TO YOUR REPO YET!!!). It should look like this: always-auth=true @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=your-token-here Then install GSAP with the bonus stuff running: npm install gsap@npm:@gsap/shockingly Once the installation of GSAP is successful, change your .npmrc file to this: always-auth=true @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=${myAuthToken} Now is safe to push that file to your repo. Remember never push that file while it still has your token. Then create your Netlify project and setup an environmental variable: Now it should work as you expect. Hopefully this helps. Happy Tweening!

Hi, I'm afraid that the whole setup with different widths for each section with the sticky vertical bar on the left is a bit more complex and could be beyond the help we can provide in these free forums. I should add that the solution in place in your original codepen is not fully responsive either. Keep in mind that horizontal pinning with vertical scroll is not really supported, so you have to stop the horizontal motion somehow in order to mimic horizontal pinning. On top of that you have the direct link to a section stuff that I haven't had the time to look into yet, but I'm 100% sure is not related to GSAP at all but more a custom logic thing. Of the top of my head one of the ideas that I have is to make every horizontal section 100% width with a position relative and move the content that is wider than the screen width. Something like this: https://codepen.io/GreenSock/pen/JjxdYYO This is just a proof of concept, so I'll leave it to you to study and understand how it works in order to replicate it with more sections and make it more dynamic and responsive. Finally I strongly recommend you to get the animation working without ScrollTrigger first and then add ScrollTrigger to make it work. Hopefully this helps. Happy Tweening!

Hi @M. Adnan Ghori, What exactly is the issue? Your original codepen demo still has the same problem and Jack seemed to provide a working version of it. The best guess I can come is this: https://codepen.io/GreenSock/pen/VwgLLLP If this is not what you're trying to do please be as specific as possible about your desired outcome and, if possible, include a link to a live example that works the way you intend so we can take a look at it. Hopefully this helps. Happy Tweening!

Hi, I think the best way here is to reparent the element being dragged and be done with it. Here is a simple example illustrating that and how this works regardless of the screen width: https://stackblitz.com/edit/stackblitz-starters-6fdfv3?description=GSAP with Vue&file=src%2FApp.vue&title=GSAP Starter It sure does need some tinkering and I'd definitely would use conditional rendering using v-if, but I'll leave that to you. Hopefully this helps. Happy Tweening!