386 of the best animated websites

Animated websites earn their motion or they don’t. The good ones in this collection — Clay, Daybridge, Legora — use animation to explain something: a product state changing, a layout settling into place, a number counting up to a figure that matters. The weak ones animate because a template shipped with a fade-in on every block. You can tell within two scrolls which one you’re looking at. Watch the first viewport. Strong animated sites hold back. One element moves, usually the thing the page is about, and everything else sits still so it reads. If six things move at once, nothing is the subject. Watch the easing, too. Motion that starts fast and settles slow feels physical. Motion on a linear curve feels like a PowerPoint. Timing is the other tell — anything over 400ms on a hover or a reveal starts to feel like the site is making you wait. Most of the sites here are built in Framer or on Next.js with GSAP or Framer Motion doing the work. The technique matters less than restraint. Animation is a cost: page weight, battery, and the patience of anyone on a mid-range Android. Spend it where it changes what the visitor understands. Browse animated landing pages, animated portfolios or animated AI sites for narrower cuts, or go to scroll animation for sites where the scrollbar is the timeline.

Updated 1 Sept 2026

Browse collections

254 sites

116 sites

96 sites

72 sites

72 sites

65 sites

41 sites

36 sites

Get the best animated websites each week

Curated inspiration sent every Tuesday

Animated design FAQs

What makes an animated website feel good rather than annoying?

Purpose and timing. Every animation should answer “what changed?” — a menu opened, a card is now selected, this section is about the next thing. Keep interactions under 300ms and page reveals under 600ms. Use an ease-out curve so movement starts quick and lands soft. And animate one thing at a time. The sites that feel bad are the ones where the visitor has to wait for the page to finish performing before they can read it.

Which tools do the animated sites in this collection use?

GSAP is still the standard for timeline work — sequencing, scroll-triggered scenes, anything with more than two steps. Framer Motion covers most component-level motion in React and Framer projects. Lenis handles smooth scrolling. Plain CSS transitions do the hovers and state changes, and on a lot of these sites that’s 80% of the motion. Rive and Lottie show up for illustrated animation that would be painful to code by hand.

Does animation hurt performance or SEO?

It can, and it’s the most common reason an animated site feels slow. Animate transform and opacity only — those run on the GPU. Avoid animating width, height, top or left, which force layout on every frame. Lazy-load heavy animation libraries below the fold. For SEO, make sure the content exists in the HTML before the animation reveals it. Google reads the page, not the fade-in.

How do I test animation on mobile?

On a real phone, not the desktop emulator. A three-year-old Android will show you every dropped frame a MacBook hides. Check that hover effects have a tap equivalent or aren’t needed. Honour prefers-reduced-motion — a good chunk of visitors have it switched on and expect the site to calm down. Most of the strongest sites here ship a simpler mobile version of their animation rather than the same one scaled down.

Is an animated site right for my project?

It is if motion helps explain the product or the work. Software with state changes, portfolios where the transitions are part of the craft, launches that need one memorable moment. It isn’t if the site is mostly reading — a blog, documentation, a long-form editorial. Those want fast, still pages. When in doubt, build the page without animation first and add motion only where something felt unclear.

386 of the best animated websites

Updated 1 Sept 2026