Amal_ks

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

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

Thanks Thanks , is this an issue... does this affect the performnce ?

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

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