DEV Community

Rahul Mall
Rahul Mall

Posted on

How I Fixed a CSS Animation Bug in an Open Source React Library

A few months back I contributed a fix to react-bits, an open source library of animated React components.

The bug was subtle β€” enableMagnetism and enableTilt animations had a 300ms delay because the component used transition-all in its base CSS class. This caused GSAP transform animations to fight against the CSS transition, creating a noticeable lag.

The fix was straightforward: swap transition-all for transition-colors. This lets GSAP control transforms freely while CSS still handles color-related properties like borders and shadows smoothly.

Small change, big difference in feel.

If you want to check out the PR: https://github.com/DavidHDev/react-bits/pull/851

I am a fullstack developer currently building projects with React, FastAPI, and PostgreSQL. You can see my work at
https://rahul-kumar-mall.vercel.app

Top comments (0)