Animation: The Line Between Delightful and Annoying Is Thinner Than You Think

There's a site I revisit every few months as a cautionary tale. I won't name it, but it's a creative agency portfolio. When you load the page, the logo animates in with a bounce effect. Then the navigation items slide in one by one from the left, each with a 200-millisecond delay. Then the hero text fades up. Then a decorative line draws itself across the page. Then the scroll indicator pulses. Then, when you start scrolling, every single section fades in from the bottom. Every image scales up. Every heading slides in from the side. Buttons have hover animations. The cursor has been replaced with a custom animated dot. The page transition between pages is a full-screen wipe.

It's technically impressive. Every animation is smooth. Every easing curve is considered. And the site is absolutely exhausting to use. By the time you've scrolled to the third section, you feel like you've been watching a fireworks display in a small room. You don't remember what the agency does. You remember the animations.

That's the trap. Animation is addictive to implement and easily overdone. The line between "this feels polished and alive" and "this feels like a theme park ride" is much thinner than most designers realise, and it's one of the hardest design judgments to calibrate.

Why Animation Works (When It Works)

Good animation serves a purpose. It communicates something that the static design cannot.

It draws attention to change. When a new element appears on screen, a brief fade or slide tells the user's visual system "something new is here, look at this." Without animation, elements pop into existence abruptly, which can be jarring or, worse, go unnoticed entirely. A subtle entrance animation is a tap on the shoulder.

It communicates spatial relationships. A modal that slides up from the bottom of the screen communicates that it's an overlay sitting "in front of" the page content. A sidebar that slides in from the left communicates its position relative to the main content. These spatial cues help users build a mental model of the interface.

It provides feedback. A button that subtly depresses on click, a form field that highlights on focus, a loading spinner that confirms something is happening. These micro-interactions tell the user that the system has received their input and is responding. Without them, users click again, wonder if something's broken, or lose confidence in the interface.

It creates personality. The way elements move, the speed and easing of transitions, the choice of which things animate and which don't, all contribute to the feel of a brand. A playful bounce suggests friendliness. A smooth, slow ease suggests luxury. A snappy, immediate response suggests efficiency. This is where animation becomes a design tool rather than just decoration.

The Problem with Scroll-Triggered Everything

Squarespace offers built-in animation settings on blocks: fade in, clip, slide (from various directions), and scale. These are applied in the block's animation dropdown and trigger as the block enters the viewport during scrolling.

The temptation is to apply these to everything. It makes the page feel more "dynamic." And in isolation, each animation looks fine. The problem emerges in aggregate.

When every element on a page animates on scroll, several things happen simultaneously. First, the animations stop being meaningful because they're applied uniformly. If every heading slides in, no heading is special. The animation becomes texture rather than communication, and the visitor's brain starts filtering it out, like background music you stop hearing.

Second, the page becomes slower to consume. Each animation takes 300 to 600 milliseconds. If a section has four blocks, each animating sequentially, the visitor waits one to two seconds for the section to fully appear. Multiply that by ten sections and the cumulative delay is significant. The visitor is waiting for your design to finish performing before they can read the content they came for.

Third, it can trigger motion sensitivity in some visitors. The WCAG guideline on motion (2.3.3) recommends that motion triggered by interaction (including scrolling) can be disabled. Approximately 35% of adults over 40 report some degree of motion sensitivity. Excessive scroll-triggered animation can cause discomfort, dizziness, or nausea in sensitive individuals. This isn't edge-case concern. It's a significant portion of your audience.

The Rules I Follow

Over years of building Squarespace sites, I've developed a personal set of animation rules. They're not universal laws, but they've consistently produced results that clients love and visitors find comfortable.

Animate the important things. Leave the rest static. On a typical page, I might animate the hero heading, the primary CTA, and the images in a featured section. Body text, secondary headings, background elements, and supporting content stay static. This creates a hierarchy where animated elements feel special because they're the exception, not the rule.

Use one animation type per page. If headings fade in, all headings fade in. If images scale up, all images scale up. Mixing animation types (this fades, this slides left, this scales, this clips) creates visual noise. Consistency makes animation feel intentional. Variety makes it feel random.

Keep durations short. My default is 400 milliseconds for entrance animations and 200 milliseconds for hover/interaction animations. Anything longer feels slow on the web, where users expect near-instant response. If a visitor is scrolling at a comfortable pace, a 400ms fade-in completes before they've scrolled past the element. A 1-second animation might still be playing as they scroll away, which defeats the purpose.

Ease out, not in. Easing curves control the acceleration of an animation. "Ease in" starts slow and accelerates, which makes elements feel heavy and sluggish. "Ease out" starts fast and decelerates, which makes elements feel snappy and responsive. For web animations, ease-out (or custom cubic-bezier curves with a fast start) almost always feels better.

Never animate content that's above the fold on load. The hero section should be visible immediately when the page loads. Fading in the hero heading means the visitor sees a blank hero for 300 to 600 milliseconds before the content appears. On a slow connection, this delay compounds with loading time, and the visitor stares at an empty page wondering if something's broken. Hero content should be present and visible on first paint.

Provide a reduced motion fallback. Users who have enabled "Reduce motion" in their operating system preferences are explicitly telling you they don't want unnecessary animation. Respect this with CSS:

@media (prefers-reduced-motion: reduce) {  * {    animation-duration: 0.01ms !important;    transition-duration: 0.01ms !important;  }}

This collapses all animations to effectively instant, meaning reduced-motion users see the same content without the movement. On Squarespace, this needs to be added via custom CSS, as the platform doesn't automatically respect the reduced motion preference for its built-in animations.

Hover Effects That Work

Hover effects are the most common animation on Squarespace sites, and they're also the most commonly mishandled.

A good hover effect communicates "this is interactive." A button that subtly shifts colour, an image that gently zooms, a link that underlines. These are functional signals that tell the visitor "you can click this."

A bad hover effect is decoration masquerading as interaction. An image that rotates 5 degrees on hover. A card that lifts up with a dramatic shadow. A button that does a colour wipe from left to right. These effects are visually interesting but don't communicate anything the visitor didn't already know, and they add processing load that can cause jank on lower-powered devices.

The best hover effects are: colour changes on buttons and links (immediate, 150ms transition), subtle scale on images (1.02 to 1.05 scale, 300ms transition, with overflow hidden on the container), and opacity changes on overlays (fading in a text overlay on a portfolio thumbnail). These are universally understood, lightweight to render, and accessible.

The effects to avoid: 3D transforms (resource-intensive and often disorienting), filter changes like blur or grayscale-to-colour (expensive to render and can cause frame drops), and anything that changes the element's size in a way that affects surrounding layout (which triggers reflow and can cause visible jank).

And remember: hover doesn't exist on touch devices. Any information or interaction revealed only on hover is invisible to mobile users. If a portfolio grid shows project titles only on hover, mobile visitors see a grid of images with no context. Hover effects should enhance, never gate content.

The Test

Here's how to evaluate whether your animation choices are working.

Show the site to someone who isn't a designer. Don't mention the animation. Watch them use the site for two minutes. Then ask: "What does this business do?" and "What did you notice about the site?"

If they can answer the first question clearly and don't mention animation at all, you've succeeded. The animation is doing its job invisibly, supporting the content without drawing attention to itself.

If they mention the animation before they mention the content ("it had those cool moving things"), the animation is the star and the content is the backing singer. That's backwards.

The best animation is the kind nobody notices. It just makes everything feel better.