[Dynamic Import]

36 minutes ago, mvaneijgen said:

Hi @Amal_ks, we can't provide code reviews on this forums.

 

If it works it works. If you have a question be sure to provide a minimal demo and we'll be happy to take a look at a your question. 

 

Hope it helps and happy tweening! 

ok, Thanks

i just want to know that , i have imported gsap in correct way ??

[Dynamic Import]

Im using Nextjs 14 , is this the correct way of importing gsap for page  performance , or any other suggestion ? 

please evaluate the code , for improvements

 

 

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)", () => {

            const magBtn =context.selector(".magnetic-btn");

 

            //magnetic-btn

            magBtn?.forEach((btn) => {

                btn.addEventListener('mousemove', (e) => {

                    let bounding = btn.getBoundingClientRect();

                    let magnetsStrength = 30;

 

                    gsap.to(btn, {

                        x: (((e.clientX - bounding.left) / btn.offsetWidth) - 0.5) * magnetsStrength,

                        y: (((e.clientY - bounding.top) / btn.offsetHeight) - 0.5) * magnetsStrength,

                        rotate: "0.001deg",

                        ease: "Power4.easeOut",

                        duration: 1.5,

                    });

                })

 

                btn.addEventListener('mouseleave', function (event) {

                    gsap.to(btn, {

                        x: 0,

                        y: 0,

                        ease: "Elastic.easeOut",

                        duration: 1.5,

                    });

                });

            })

 

        })

 

    }, { scope: Animcontainer });

[Invalid scope]

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 ?

 

[Invalid scope]

<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.

 

[Invalid scope]

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 ? "