🐞[Bug]: Landing page card hover animation is not appropriate, it seem like it is not implemented professionally.

[ishubtripathi]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

@sanjay-kv : The hover animation on the landing page cards does not feel smooth or responsive. There is a clear lag when moving the cursor over a card, which makes the effect seem unprofessional and out of touch with current UI standards. The transition needs to be improved to ensure a seamless and fluid hover interaction.

Expected behavior

When a user hovers over a landing page card, the animation should respond immediately with a smooth transition. The hover effect should feel consistent and professional, improving the overall user experience without any noticeable delay or lag.

Add ScreenShots

No response

What browsers are you seeing the problem on?

No response

Record

• I have read the Contributing Guidelines
• Are you a GSSOC'25 contributor
• I want to work on this issue

[github-actions]

Thanks for opening this issue! 🎉 We'll look into it as soon as possible, estimated time for response is 5–8 hrs.

Don't raise PR unless assigned to you.

In the meantime, please provide all necessary details and context to your issue — screenshots or videos of your changes help speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your issue goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Resources which can help you know more about Github 👇🏻

1. End to End GitHub Beginner Playlist: GitHub Playlist.

2. Build your GitHub Profile: GitHub Profile Optimisation.

3. GitHub Handbook for dummies: GitHub Blog for Beginners.

[sanjay-kv]

can u point me to which is the place.

[Yash456k]

@sanjay-kv I believe they're referring to this section:

Looking at the code, the issue appears to be in the blogCard.tsx file, the lag might be caused since we are using css and framer motion both :

recode-website/src/components/blogCarousel/blogCard.tsx

Lines 36 to 48 in 10a3af9

	<motion.div
	initial={{ opacity: 0, y: 40, scale: 0.95 }}
	animate={{ opacity: 1, y: 0, scale: 1 }}
	transition={{ duration: 0.6, ease: "easeOut" }}
	whileHover={{
	y: -8,
	scale: 1.02,
	transition: { duration: 0.4, ease: "easeOut" }
	}}
	onMouseEnter={() => setIsHovered(true)}
	onMouseLeave={() => setIsHovered(false)}
	className="relative overflow-hidden h-full transition-all duration-300"
	>

Also it seems isHovered is not being used anywhere else ? It should be removed.

Suggested fix seems to be to try and experiment with removing the css transition (more specifically the transition-all part) where we use the framer transitions already. Would need to check locally to be 100% sure, and since @ishubtripathi has asked to be assigned this issue I would suggest looking into this.

[sanjay-kv]

Thanks @Yash456k for clarifying,

[github-actions]

👤 Issue assigned to @ishubtripathi.