Match the method to the animation. Use CSS transitions and keyframes for hover effects and simple reveals. Use the View Transitions API or CSS scroll-driven animations for page and scroll effects. Use a library such as Motion or GSAP for complex, coordinated motion. Use a runtime file (Lottie, Rive or ExodeUI) for designed illustrations and interactive components. Always animate transform and opacity, and respect reduced motion.
The View Transitions API animates between pages or states. CSS scroll-driven animations tie motion to scroll position. The Web Animations API gives JavaScript control over CSS-like animations. All three avoid extra libraries.
Reach for a library when it gets complex
Motion (formerly Framer Motion) is popular in React for gestures, layout and exit animations. GSAP is strong for timelines and complex sequencing on any site.
Use a runtime for designed motion
Illustrations, animated icons and multi-state components designed by a designer are best shipped as files: Lottie for played animations, Rive or ExodeUI for interactive ones. We make ExodeUI.
Keep it fast and kind
Animate transform and opacity. Lazy-load heavy animations. Keep text readable without waiting for motion. Respect prefers-reduced-motion. Test on a mid-range phone.
Frequently asked questions
Do website animations hurt SEO?
Not directly. Heavy animations can slow pages and hurt Core Web Vitals, so keep them light.
What is the easiest way to add animation to a website?
CSS transitions for hovers, and a Lottie web component for illustrations.
Can I animate a Webflow or WordPress site?
Yes. Webflow has built-in interactions and Lottie support; WordPress has blocks and plugins.
Should I use GSAP or Motion?
Motion fits React apps well. GSAP is great for timeline-heavy sites in any framework.