Create a Stunning Stroke SVG Hover Effect with GSAP & Next.js
In this tutorial, I’ll show you how to create a *modern SVG hover effect with GSAP in Next.js* from scratch.
We’ll build an interactive card gallery where custom SVG stroke paths animate smoothly when you hover over each card. We’ll also animate the text using *GSAP SplitText* and create smooth enter and leave animations.
🔗 *https://github.com/soheilfa-work/stroke_ho...
💻 *GitHub:* [https://github.com/soheilfa-work]
🌐 *Live Demo:* [https://stroke-hover-effect-git-main-sohei...]
*In this tutorial, you’ll learn how to:*
Create custom SVG stroke paths
Animate SVG paths with GSAP
Create a smooth SVG draw-on effect
Use GSAP SplitText to animate text word by word
Create `mouseenter` and `mouseleave` animations
Use `useLayoutEffect` for GSAP animations in React
Prevent animation flickering on page load
Add a custom following cursor to make the project more interactive
You can use this technique in your own *portfolio websites, landing pages, galleries, and interactive UI projects* to make them feel more polished and professional.
*Tech Stack:*
Next.js
React
GSAP
SplitText
SVG
Lenis
If you enjoyed the tutorial, make sure to **like, subscribe, and leave a comment**. More creative frontend experiments are coming!
Keep coding and keep creating! 🚀
#NextJS #ReactJS #GSAP #SVG #WebAnimation #FrontendDevelopment #WebDevelopment #JavaScript #SplitText #CreativeCoding #Frontend #Animation #WebDesign