How to animate components in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Creating smooth animations in React components enhances user experience and provides visual feedback for state changes. With over 25 years of experience in software development and as the creator of CoreUI, I’ve implemented countless animations in production applications. The most efficient approach is to use CSS transitions combined with React’s state management to trigger animation classes. This method provides excellent performance and is compatible across all browsers.
Use CSS transitions with conditional class names based on React state to animate component properties.
import { useState } from 'react'
import './AnimatedCard.css'
function AnimatedCard() {
const [isVisible, setIsVisible] = useState(false)
return (
<div className={`card ${isVisible ? 'card-visible' : 'card-hidden'}`}>
<h3>Animated Card</h3>
<button onClick={() => setIsVisible(!isVisible)}>
Toggle Animation
</button>
</div>
)
}
This example uses React state to toggle between CSS classes that define different animation states. The isVisible state determines whether to apply the card-visible or card-hidden class, which contain CSS transition properties for smooth animations. The component re-renders when state changes, applying the appropriate class and triggering the CSS transition.
Best Practice Note:
This approach is used extensively in CoreUI components for smooth, performant animations that don’t block the main thread. For complex animations involving multiple elements, consider using transform properties instead of layout-affecting properties for better performance.
