Amal_ks Posted March 1 Share Posted March 1 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 }); Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 1 Share Posted March 1 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! Link to comment Share on other sites More sharing options...
Amal_ks Posted March 1 Author Share Posted March 1 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 ?? Link to comment Share on other sites More sharing options...
Rodrigo Posted March 1 Share Posted March 1 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! 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