Feb 24
Loading video player...
In this video, we build a Magnetic Mouse Hover Animation using React, TypeScript, and GSAP — the same effect you often see on award-winning websites. We start from a clean Vite setup and gradually build the animation step by step. Along the way, we’ll understand the math behind the effect, fix common mistakes, and optimize it using GSAP’s recommended best practices like quickTo and contextSafe. By the end of this video, you’ll not only know how to build the effect — but also how to implement it in a performant, production-ready way. 🔧 What you’ll learn: - Setting up a clean React + TypeScript project - Creating a reusable Magnet component - Understanding clientX & clientY vs element position - Using getBoundingClientRect correctly - Calculating distance from the center (core math concept) - Resetting animations on mouse leave - Why gsap.to on every mousemove is not ideal - Using gsap.quickTo for performance optimization - Using useGSAP and contextSafe properly in React 📦 Source Code: https://github.com/sahilgupta-dev/Magnet-Hover-Component ⏱️ Timestamps: 00:00 Intro 00:15 Basic project setup 01:04 Creating the magnetic hover component 01:54 Setting up GSAP for our animations 02:38 Creating the animations 03:24 Fixing up the translation logic 04:30 Optimizing our animation code 05:46 Outro 👍 If this helped: Like, subscribe, and drop a comment if you want more tutorials on: ✨ React UI animations ✨ GSAP tricks ✨ Portfolio-ready components #React #GSAP #WebDevelopment #Frontend #ReactTutorial #GSAPAnimation #magnetichoveranimation #textanimation #hoveranimation #UIAnimation #WebDesign #JavaScript #CodingTutorial #FrontendDevelopment #ReactJS #Animation #CodeWithMe #DevCommunity #LearnReact #FrontendTips #UIDesign