Rodrigo

Hi, You can also tap into GSAP's ticker in order to change the update frequency: https://greensock.com/docs/v3/GSAP/gsap.ticker But as @mvaneijgen mentions, it'd be far better to know exactly what you're looking for in order to give you the proper advice. Happy Tweening!

Hi, Maybe this example can provide some inspiration: https://codepen.io/GreenSock/pen/jOezPLN Hopefully this helps. Happy Tweening!

Hi, Your problem is here: gsap.set(gsap.utils.toArray(entry, name, desc, details), { clearProps: true }); If you check the docs for the toArray method you'll see that the second parameter it's a scope element or selector: Parameters targets : [Object | String | NodeList | Array] - The target(s) that you want wrapped in a flattened Array (it can be selector text, objects, NodeList, jQuery objects, etc.) scope : [Element | Ref] (optional) - The Element (or React ref) to which the selector text scope should be limited, like calling .querySelectorAll([selector-text]) on this Element rather than the document. In other words, it will only return descendant Elements of the scope Element, like jQuery.find(). This is only helpful when targets is selector text. So basically you're telling GSAP, create an array with the entry element and use the name element as scope, the other two (desc and details) are just ignored, because the method is expecting two parameters. There are two solutions: Pass an array with the elements to the method: gsap.set(gsap.utils.toArray([entry, name, desc, details]), { clearProps: true }); Don't use the toArray method. Those elements are already DOM nodes so you can wrap them in an array and be done with it: gsap.set([entry, name, desc, details], { clearProps: true }); Hopefully this helps. Happy Tweening!

Hi, The ScrollTrigger Docs have a long section about the snap configuration options. Scroll to Usage & special properties, the properties are ordered alphabetically, so just scroll down to the S: https://greensock.com/docs/v3/Plugins/ScrollTrigger Here are a couple of examples of Horizontal Snapping: https://codepen.io/GreenSock/pen/YzygYvM https://codepen.io/GreenSock/pen/GRjwPgx Hopefully this is enough to get you started. Happy Tweening!

Hi @Rasel12 and welcome to the GreenSock forums! I'm a bit confused about what exactly you're trying to do actually 🤔 The code you have in place is doing exactly what it has to do. If you have a different idea in mind, please be more specific about what your current codepen is not doing in order to nudge you in the right direction. Happy Tweening!

Hi @CptRobby and welcome to the GreenSock forums! This seems to be related to some stuff Vue does to refs that is a bit longer to explain here. But is definitely not a GSAP issue. If possible don't store your GSAP timeline in a ref, since that particular element becomes reactive as well, so if nothing in your app depends on that ref being updated, there is no actual need to store the GSAP Timeline in a ref, just create a variable and update that variable inside the GSAP Context instance: const block = ref(); const button = ref(); let tl; let ctx; onMounted(() => { ctx = gsap.context(() => { tl = gsap.timeline(); tl.to(button.value, { opacity: 1, duration: 1, }); }, block.value); }); Finally is not a good idea to make paused: true a default in your Timeline configuration, since every single instance you add will be paused and you'd have to change that as you create them. Is better to just make the timeline paused: let ctx; let tl; onMounted(() => { ctx = gsap.context(() => { tl = gsap.timeline({ paused: true, }); tl.to(el, { /*...*/ }); // Later in your code or in a method tl.play(); }, scope); }); Hopefully this helps. Happy Tweening!

Hi, Be sure to have something like this in your .npmrc file: always-auth=true @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=${NPM_TOKEN} This repo was deployed less than two weeks ago to vercel without any issues: https://github.com/rhernandog/gsap-bonus-npm-vercel Here is the live page (not a lot, just a proof of concept of a successful deployment and CI/CD pipeline): https://gsap-bonus-npm-vercel.vercel.app/ If you inspect the console you'll find this line there: https://github.com/rhernandog/gsap-bonus-npm-vercel/blob/main/pages/_app.js#L8 Hopefully this helps. Happy Tweening!

Hi, One solution is to make the horizontal animation a timeline and midway add some opacity animations to each anchor. Also I think you might want to have the last section anchor visible at the beginning and the first section one visible at the end. Something like this: https://codepen.io/GreenSock/pen/ExdzZyW Hopefully this helps. Happy Tweening!

Hi, This seems related to some SSR issue. Cassie's example is working fine on a React App but your example is not and here is an error I'm getting in the console: Warning: Extra attributes from the server: style at body That's in your layout file: <html lang="en"> <body className={inter.className}>{children}</body> </html> If you remove that class from the body tag your example works as expected: https://stackblitz.com/edit/nextjs-jfi5ws Now, why Next is complaining about the style attribute on the body tag I have no idea 🤷‍♂️, as far as I can tell that should be valid HTML, unless I'm wrong about that. Hopefully this helps. Happy Tweening!

Hi, I think you are overcomplicating this. There is no need for two different images, just expand the target image (clicked by the user) and be done with it. This codepen example could provide a solid guide for that approach: https://codepen.io/GreenSock/pen/wvGOJGQ Hopefully this helps. Happy Tweening!

Hi, This is the closest I can get to what you need: https://codepen.io/GreenSock/pen/ExdJyBe There's still a bit of space at the bottom but I don't know how to remove that. Hopefully this helps. Happy Tweening!

Hi, Once again, without a minimal demo there is not a lot we can do. I don't know the difference between running a code with a use client or not. I'm not really aware of this particular flag. If you ask me React and Next have only complicated things even further in their latest versions with the server components, use client, app folder and such things. I worked on many Next projects when none of that nonsense was available and things were rendered in the server. Honestly it's like their looking for ways to complicate things as much as possible and make the lives of developers miserable 🤷‍♂️ If you have a preloader what you could do is create a global context and trigger a state property in that context once that animation is complete. Then in your components have an effect hook that has that particular state property as it's only dependency and create your GSAP instances only when that property indicates that the preloader animation is complete. Something like this: useLayoutEffect(() => { if(!loaderComplete) return; const ctx = gsap.context(() => {}, scope); return () => ctx.revert(); }, [loaderComplete]); Hopefully this helps. Happy Tweening!

Hi, As far as I can see the codepen in Cassie's last post seems to work the way you expect. If you have other specs in your setup then be sure to include or them in your minimal demo in order to get a better idea of what you're trying to do. Maybe the issue could be your HTML and CSS more than a GSAP specific problem. First try to create an HTML/CSS setup that looks the way you intend, then start creating your animations without ScrollTrigger. Once your animations do exactly what you want, then add ScrollTrigger to the mix. Happy Tweening!

Hi @hoxifo and welcome to the GreenSock forums! There are a few approaches I can think for this. The simplest one is to wrap both sections in a container and pin that container: https://codepen.io/GreenSock/pen/VwENjYd Hopefully this helps. Happy Tweening!

Hi, Thanks for providing information about this. I'm not all that familiar with Svelte Transition yet, but normally other frameworks like Vue or packages like React Transition Group, have explicit in/out animation types for routes, so that allows you to move out a page before moving the other. Also they include ways to tell the Transition component/function that the animation is completed in order to, once the page transition is done, create your GSAP instances at a normal state soto speak and not midway the page transition animation. Happy Tweening!

Hi @WeDesignTech and welcome to the GreenSock forums! Thanks for being a Club GreenSock member and supporting GreenSock! 💚 Using videos is not the best possible way to give you support. The only thing I was able to spot is the code queue you're setting in wordpress. You have your custom js file first and then all your GSAP files and plugins. Your custom js should have as a dependencie all the GSAP core files and plugins so you have certainty that is being executed after the GSAP core and plugins are loaded. For more information about using GSAP in wordpress check this page: Hopefully this helps. Happy Tweening!

Hi, On top of @mvaneijgen's great advice, maybe you could take a look at this codepen example: https://codepen.io/GreenSock/pen/XWxOwVp Hopefully this helps. Happy Tweening!

Hi @Dean Draper and welcome to the GreenSock forums! Thanks for being a Club GreenSock member and supporting GreenSock! 💚 You can use the getProperty method for that: https://greensock.com/docs/v3/GSAP/gsap.getProperty() Also another option could be the revert method that every GSAP Tween/Timeline has: https://greensock.com/docs/v3/GSAP/Tween/revert() If you keep having issues, please remember to include a minimal demo so we can have a better look at what could be the problem. Hopefully this helps. Happy Tweening!

Hi, You can also give the Horizontal Endless Loop helper function a try: https://greensock.com/docs/v3/HelperFunctions#loop Here is a super simple example in React: https://stackblitz.com/edit/vitejs-vite-auctqy Hopefully this helps. Happy Tweening!

Hi, What particular part of your animations is not working? You have over 400 lines of HTML and almost 200 lines of JS. We don't have the time resources to comb through all that code in order to find what is not working and why, especially if you're not specific about it. Happy Tweening!

Hi @SImonR82 and welcome to the GreenSock forums! It's really hard for us to troubleshoot an issue without a minimal demo, but this might stem from the fact that you're not properly cleaning up in your effect hook. From version 18 React has strict mode which runs the effect hooks (useEffect and useLayoutEffect) twice which creates a very unique problem with from instances as explained here: That's why we have GSAP Context now: https://greensock.com/docs/v3/GSAP/gsap.context() So your effect hook should look like this: useEffect(() => { const ctx = gsap.context(() => { // All your GSAP instances in here }, scope); return () => ctx.revert(); // <- Super easy cleanup }, []); Also we always recommend using the useLayoutEffect, especially if you plan on using ScrollTrigger and/or Flip plugins. In the case of Next you can use this approach: https://greensock.com/react-advanced#useIsomorphicLayoutEffect Finally I recommend you to take a look at the resources in this page: Hopefully this helps. Happy Tweening!

Hi, Indeed you never mentioned that this was a GSAP issue. Me mentioning that falls into the fact that we have to keep these forums focused on GSAP related issues, not issues related to other frameworks, that's all. Luckily I had a few moments to spare and create the example for you, but only because it didn't require a lot of times. Have a look at the courses I posted before in order to learn more about Vue. For any GSAP related question, we're here for you!! 💚 Happy Tweening!

Hi, This might not be the easiest of things. One option is to add/remove an event listener to the document.body element, that prevents the default for the scroll event and the touch ones: https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event But having a scroll bar and the content not moving should be misleading and probably bad UX. Another option is to set the document.body overflow to hidden until the conditions you set (be explicit about those to the users, otherwise this is also terrible UX) are met. Here is a fork of your codepen that somehow works: https://codepen.io/GreenSock/pen/WNamKNv Hopefully this helps. Happy Tweening!

Hi @iDVB, That's unfortunately one of the tradeoffs of RTF and using canvas (THREE in this particular case). When using THREE directly I imagine that you can create variables or constants for each element, but with RTF being high order components that create a THREE object, you have no other choice. The one alternative I can think of is to create a method (ref should also run as a callback) and create an object with useRef in order to have a central immutable store for all your elements. const threeRefs = useRef({}); const createRef = (name, e) => { threeRefs.current[name] = e; }; return ( <main> <RTFElement ref={(e) => createRef("myCube", e)} /> </main> ); The code above assumes that the ref in a RTF component returns the actual reference to the rendered THREE element in the canvas. Hopefully this helps. Happy Tweening!

Hi, On top of Jack's advice we have this starter template for Next with the app folder so you can take a look https://stackblitz.com/edit/nextjs-ysf649 Hopefully this helps. Happy Tweening!