# How do I make animations for a website?

> 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.

Updated November 2026. Source: https://www.exodeui.com/questions/how-to-make-website-animations/

## Key takeaways

- CSS: hovers, simple transitions, loading spinners
- Browser APIs: View Transitions, scroll-driven animations, WAAPI
- Libraries: Motion and GSAP for complex sequences
- Runtime files: Lottie, Rive, ExodeUI for designed motion
- Performance: transform and opacity; accessibility: reduced motion

## 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.

## Related

- [How to add a Lottie animation to HTML](https://www.exodeui.com/questions/how-to-add-lottie-animation-to-html)
- [What is the Web Animations API?](https://www.exodeui.com/questions/what-is-the-web-animations-api)
- [Best web animation tools](https://www.exodeui.com/best-web-animation-tools)
- [Modern web animation stack](https://www.exodeui.com/learn/modern-web-animation-stack)