Amal_ks Posted February 28 Share Posted February 28 import { useRef } from "react"; import { useGSAP } from "@gsap/react"; const useDeskAnim = () => { const Animcontainer = useRef(); useGSAP(async (context) => { const gsap = (await (import('gsap'))).default const ScrollTrigger = (await (import('gsap/dist/ScrollTrigger'))).default const CustomEase = (await (import('gsap/dist/CustomEase'))).default gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(CustomEase); gsap.config({ nullTargetWarn: false, force3D: true, }); let mm = gsap.matchMedia(); mm.add("(min-width : 992px)", () => { let easing = CustomEase.create("custom", "0.215, 0.61, 0.355, 1"); const fadeElement = context.selector('.fade-elm'); //common-fade-up fadeElement ? ScrollTrigger.batch((".fade-elm"), { onEnter: (batch) => gsap.to(batch, { // opacity: 1, autoAlpha: 1, y: 0, force3D: true, stagger: 0.1, duration: .6, ease: easing, delay: 0, // onComplete: () => context.revert(), }), start: "top 98%", end: "top 90%", // markers: { startColor: "black", endColor: "blue" }, }) : "" }) }, { scope: Animcontainer }); return { Animcontainer }; }; export default useDeskAnim; " const fadeElement = context.selector('.fade-elm'); => is showing invalid scope ? " Link to comment Share on other sites More sharing options...
GSAP Helper Posted February 28 Share Posted February 28 Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer. See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: Using a framework/library like React, Vue, Next, etc.? CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: React (please read this article!) Next Svelte Sveltekit Vue Nuxt Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅ Link to comment Share on other sites More sharing options...
Rodrigo Posted February 28 Share Posted February 28 Hi @Amal_ks and welcome to the GSAP Forums! This doesn't look right to me: return { Animcontainer }; The return statement in a React functional component should be JSX right now you're returning a ref and that's why you're getting a scope warning, because nowhere in your code that ref is being set to an actual DOM node. Hopefully this clear things up. If you keep having issues then create a minimal demo that clearly illustrates the problem. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Amal_ks Posted February 28 Author Share Posted February 28 <section ref={animContainer}> <div className="box"></div> <div className="box2"></div> <div className="box3"></div> </section> useGSAP((context) => { let element = context.selector('.box'); } , {scope:animContainer}) is this the right way to select the element , when i do this , " Invalid scope " is showing on console. Link to comment Share on other sites More sharing options...
Amal_ks Posted February 28 Author Share Posted February 28 Thanks 14 minutes ago, Rodrigo said: Hi @Amal_ks and welcome to the GSAP Forums! This doesn't look right to me: return { Animcontainer }; The return statement in a React functional component should be JSX right now you're returning a ref and that's why you're getting a scope warning, because nowhere in your code that ref is being set to an actual DOM node. Hopefully this clear things up. If you keep having issues then create a minimal demo that clearly illustrates the problem. Happy Tweening! Thanks , is this an issue... does this affect the performnce ? Link to comment Share on other sites More sharing options...
Rodrigo Posted February 28 Share Posted February 28 As far as I can tell it should, but without a minimal demo I couldn't really tell you, all I can say is that based on the code snippet you posted that doesn't look good and it should create an error, this is how React works in a nutshell: https://react.dev/learn#components Here is a simple demo: https://stackblitz.com/edit/gsap-react-basic-f48716?file=src%2FApp.js Hopefully this clear things up. Happy Tweening! Link to comment Share on other sites More sharing options...
RobertRobles Posted April 8 Share Posted April 8 On 2/28/2024 at 7:18 PM, Rodrigo said: As far as I can tell it should, but without a minimal demo I couldn't really tell you, all I can say is that based on the code snippet you posted that doesn't look good and it should create an error, this is how React works in a nutshell: https://react.dev/learn#components Here is a simple demo: https://stackblitz.com/edit/gsap-react-basic-f48716?file=src%2FApp.js Hopefully this clear things up. Happy Tweening! Thank you, sir, for the demo link. I will check it out. If I face any issues, I will ask by starting my thread for better conversation. I am a student, and a few days ago, my teacher gave me an essay to write, and I wasn't satisfied, but I wrote it, and I found the same essay topic on a website called https://domypaper.com/samples/social-innovation-concept domypaper. I read the essay there, and then I found the mistakes in mine. If you are also a student like me, you can also visit them to learn more. Thank you sir for the demo link. I will check it. If I face any issue, I will ask by starting my own thread for better conversation. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now