Submitted 3 months agoA solution to the Social links profile challenge
Social links profile with CSS animations
next, react, tailwind-css
P
@johnnygerard
Solution retrospective
What challenges did you encounter, and how did you overcome them?
The Figma interaction on hover with a spring animation was challenging. I could not replicate it with Motion even using the same parameters ({ mass: 1, stiffness: 80, damping: 20 }).
It seems there is no standard algorithm for the spring animation (different durations for the same parameters). So I decided to approximate the Figma animation from the prototype.
I combined two CSS animations (with onMouseEnter and onMouseLeave).
Code
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Johnny Gérard's solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord