Dynamic Import

[Amal_ks]

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 });

[mvaneijgen]

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! 

[Amal_ks]

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

[Rodrigo]

Hi,

 

Keep in mind that normally bundling solutions like webpack, vite, rollup, etc. will minify code for you so the minified versions of those plugins won't be more than 50 KB combined, so you won't gain a lot in terms file size or loading time to be honest, but as Mitchel said if it works the way you intend and you don't get any errors, then just import the plugins like that.

 

Happy Tweening!