Every effect on a page costs something: hours to build, a library that ships with it, frames to render, and a second version for everyone who has switched motion off. Most lists of animation ideas leave that side out. This guide rates the effects that turn up in almost every brief on two scales from 1 to 5, effort and impact, and sorts them into four groups: the ones that pay off almost everywhere, the set pieces you afford once per page, the basics you take when they come for free, and the ones that cost more than they return.
- Rate effort and impact separately, both from 1 to 5. An effect gets built when impact is at least two points above effort, or when it is the one set piece of the page.
- The best return comes from four effects: staggered entrances, hover states with a purpose, scroll-triggered fades under 0.7 seconds, and one number that counts up. Together they take about a day and carry most of what makes a page feel finished.
- A page carries one set piece. A scroll-scrubbed image sequence, a pinned horizontal chapter and a word that opens into a photo compete for the same attention. Two of them cancel each other out.
- Effects that move the chrome instead of the content sit in the low-return corner: magnetic buttons, custom cursors, particle backgrounds, preloaders. On touch devices, which is more than half of all visits, they do nothing, and they still need the reduced-motion version.
How do you decide whether an effect is worth building?
Rate two things separately and only then compare them: what the effect costs and what it does for the reader. Both from 1 to 5. Most arguments about animation go wrong because one side talks about cost and the other about feel, and neither number is on the table.
Effort counts everything, not just the first build. A 1 is under an hour and CSS only. A 3 is a day, one library and a second state for touch and for reduced motion. A 5 is more than two days, a canvas or WebGL layer, its own physics or a frame sequence that has to be produced, and a review every time the content changes.
Impact asks three questions. Does the effect explain the structure of the page, for instance which items belong together or where a chapter starts? Does it make the page feel finished? Does it bring someone closer to the one thing the page is for? A 1 means nobody would notice if it were gone. A 5 means people describe the page by it afterwards.
Plotted against each other, the two numbers form four groups. Low effort and high impact is the sweet spot, and everything in it goes on every page. High effort and high impact is the set piece, one per page. Low effort and low impact are the basics that come along by themselves once the sweet spot is in place. High effort and low impact is the corner you leave alone, however good the demo looks.
An effect you cannot explain in one sentence, what it tells the reader, belongs in the low-return corner, whatever it looks like.
Which effects are the sweet spot?
Four effects with an effort of 1 or 2 and an impact of 4: the staggered entrance, hover states that say what will happen, a fade that runs when a section enters the viewport, and one number that counts up. Together they take about a day and carry most of what makes a page feel finished.
What they share: each one attaches to content the reader is looking at anyway, and each one is over before the reader would have to wait for it. That is the whole trick. Motion that arrives with the content reads as care. Motion that the content waits for reads as a delay.
- Staggered entrance (effort 1, impact 4). Cards, list items or nav links appear one after the other, 50 to 80 milliseconds apart, each fading in over 0.4 to 0.6 seconds from 12 to 20 pixels below. It tells the reader which things belong together. Stop at six items: after that the last one arrives 400 milliseconds late and the group falls apart.
- Hover states with a purpose (1, 4). A card lifts by 2 to 4 pixels, an arrow moves 4 pixels to the right, an underline draws from the left, all within 150 to 250 milliseconds. Each one answers what happens on click. Below 100 milliseconds it flickers, above 300 it lags behind the pointer.
- Scroll-triggered fade and slide (2, 4). A section fades in and moves up 16 to 24 pixels once 20 to 30 percent of it is in the viewport, in 0.5 to 0.7 seconds, once. One rule for the whole page. Never on the hero: the first screen stands before any script runs.
- Number count-up (2, 4). A figure runs from 0 to its value in about 1.2 seconds with an ease-out, once, when it comes into view. It draws the eye to the one number the section is about. It works for years, customers and percent, not for prices, which people want to read, not watch.
- Height on accordions and menus (2, 3). Opening in 250 to 350 milliseconds instead of a jump. With grid-template-rows from 0fr to 1fr it needs no script. Nobody praises it, everybody notices when it is missing.
- Marquee (1, 3). A row of logos or words moving at 20 to 40 pixels per second, pausing on hover. It fills a narrow strip with life for the price of one keyframe.
Six effects, and one rule to go with them: one duration for entrances, one for hover and one curve for the whole page. Most pages that feel unfinished do not lack effects. They have five durations.
const enter = { hidden: { opacity: 0, y: 16 }, shown: { opacity: 1, y: 0 },};const group = { shown: { transition: { staggerChildren: 0.06 } },}; // one duration, one curve, for every entrance on the page const ease = { duration: 0.5, ease: [0.22, 1, 0.36, 1] };
Three curves cover everyday work.
A page with three curves feels ordered, one with twelve feels random. These three are almost always enough.
Which effects are set pieces, and how many can a page carry?
One. A set piece is an effect with an effort of 4 or 5 and an impact of 4 or 5, and it earns its cost only where the reader's attention already is: the first screen, or one chapter break in the middle of a long page.
The candidates: an image sequence scrubbed by the scroll, a word that opens into a photo and grows to the full stage, a pinned horizontal chapter, text that fills line by line as you scroll, a distortion in an image that follows the pointer. Each one takes one to three days, most need a library for scroll timelines, and every one needs a still version for reduced motion and a fallback for touch.
Two of them on one page cancel each other out. The reader has one slot in memory for what this page did, and two set pieces fight over it. The second one also arrives after the first has used up the patience for waiting.
- Scroll-scrubbed image sequence (5, 5). 120 to 200 frames at 1600 pixels wide come to 8 to 15 megabytes as JPEG or WebP. Preload them before the section, draw to a canvas, and cap the scrub at 24 frames per second, more does not read as smoother. On a phone, a second set at 800 pixels.
- Word that opens into a photo (4, 5). A gap opens in a headline, images cut through it, the last one grows to fill the screen. One scrubbed timeline of eight steps, about 400 percent of the viewport height as track, and measured rather than computed positions, because the two halves of a word are never the same width.
- Pinned horizontal chapter (4, 4). A row of panels that scrolls sideways while the page holds still. Needs 300 to 400 percent of the viewport height as track and a plain vertical layout on phones, where sideways scroll fights the browser.
- Text that fills as you scroll (3, 4). A paragraph in 20 percent grey that turns black word by word, tied to the scroll position. Strong for a manifesto or one claim, tiring past 40 words.
- Cursor-driven image distortion (5, 3). Needs WebGL and a shader, about 150 kilobytes of library, and nothing happens on touch. Impressive in a demo, rarely worth the build on a page that has to load in under three seconds.
Which effects cost more than they return?
The ones that move the chrome instead of the content. A magnetic button, a custom cursor, particles behind the hero, an animated gradient, a preloader, a typewriter effect on the headline, parallax on every image. They share three properties: they need a pointer, they run whether anyone is looking or not, and they explain nothing about the page.
Touch is the first problem. On phones and tablets there is no hover and no cursor, so magnetic buttons, custom cursors and anything that follows the pointer are invisible to more than half of all visits. What is left is the code, the bundle and the reduced-motion branch.
Waiting is the second. A typewriter effect at 50 milliseconds per character takes two seconds for a 40-character headline, and the reader sits through it. A preloader puts one to three seconds in front of the first paint, on a page that would otherwise have been readable at 0.8. Both look like polish on a showreel and like a delay in a browser.
Cost per frame is the third. A particle canvas or an animated blur keeps the main thread busy at 60 frames per second for as long as the tab is open, and that shows up as a warm phone and a shorter battery. A frame has 16.7 milliseconds. A full-width backdrop-filter of 20 pixels takes several of them on a mid-range phone before anything else has run.
None of this is a ban. A cursor follower in one gallery, a particle field behind one dark chapter of a product page, a preloader on a site whose whole point is one four-megabyte scene: each can be right. The rating says what it costs, and that the default answer is no.
- A magnetic button that follows the pointer within 80 pixels. On touch it is a button.
- A custom cursor that replaces the arrow with a 40-pixel circle. It hides the pointer everyone knows, and on touch it does nothing.
- A typewriter effect on the headline, 50 milliseconds per character. The reader waits two seconds to learn what the page is about.
- Parallax on every image, each at a different speed. The page swims, and nothing is anchored.
- A button whose arrow moves 4 pixels on hover and whose label lifts 1 pixel. Same feel, and on touch a plain button.
- The pointer stays. Where one element needs a hint, cursor: grab or a small label that follows only there is enough.
- The headline stands from the first frame. If something should type, let it be one word at the end, not the sentence.
- Parallax on one image per screen, at most 10 to 15 percent of the scroll distance, and on desktop only.
What does an effect really cost?
About a third of it is the build. The rest is the library it brings in, the frames it renders, the version for everyone who has switched motion off, and every later change to the content it hangs on.
Libraries first, because they are the easiest to count. framer-motion is about 34 kilobytes gzipped as a whole, or 15 or 25 with LazyMotion and the domAnimation or domMax feature set. GSAP core is about 23 kilobytes, ScrollTrigger adds 13. A WebGL layer with Three.js starts at 150. Pure CSS costs 0, and scroll-driven animations in CSS run in Chrome, Edge and Safari today, in Firefox not yet by default. Figures rounded, as of September 2026.
Frames second. Only transform and opacity run on the compositor without layout work. Animating width, height, top, left or a shadow forces the browser into a new layout pass on every frame, and on a phone that is the difference between 60 frames per second and 20. Blurs and backdrop-filter are compositor work too, but expensive work: keep them to small areas and never animate the radius.
The still version third. prefers-reduced-motion is a system setting that a meaningful share of people have on, and the effect needs an answer to it that is not an empty space. Fades can stay. Travel, parallax, autoplay and anything tied to the scroll go, and the end state stands there instead. Every effect you rate gets this branch, so its cost belongs in the effort score from the start.
Content changes last. A set piece is built for one headline, one image, one number. When the client changes the word that opens into a photo, someone measures again. That is why a set piece is a 4 or 5 in effort even when the first build took a day.
The same fade at 0.3, 0.6 and 1.2 seconds. Under 0.3 nothing is seen, above 0.8 something is waited for.
Where do common effects land in the matrix?
Thirty-six effects with their rating, from the sweet spot to the low-return corner. The first number is effort, the second impact. They assume a marketing or portfolio page with a normal budget. A product demo or a game shifts a few of them.
- Staggered entrance (1, 4). Sweet spot. Explains what belongs together, for one line of configuration.
- Card lift on hover (1, 4). Sweet spot. 2 to 4 pixels, 200 milliseconds, and the card says it can be clicked.
- Underline that draws (1, 3). Sweet spot. One pseudo element with scaleX from 0 to 1.
- Arrow that moves on hover (1, 3). Sweet spot. 4 pixels of travel are enough, more looks nervous.
- Scroll-triggered fade up (2, 4). Sweet spot. Once per section, never on the first screen.
- Number count-up (2, 4). Sweet spot. For figures, not for prices.
- Tab indicator that slides (2, 4). Sweet spot. Shows the way from one state to the next.
- Image reveal with clip-path (2, 4). Sweet spot. One keyframe, runs on the compositor.
- Accordion height (2, 3). Sweet spot. grid-template-rows from 0fr to 1fr, no script.
- Marquee strip (1, 3). Sweet spot. 20 to 40 pixels per second, pause on hover.
- Image scale on scroll (2, 3). Sweet spot. 5 to 10 percent, more makes the image swim.
- Sticky header that shrinks (2, 3). Sweet spot. Gives the page room at the top without losing the navigation.
- Page transition fade (2, 3). Sweet spot. 200 milliseconds, more feels like loading.
- Skeleton loading (2, 3). Sweet spot. Shows the shape of the content before it arrives.
- Toast that slides in (1, 3). Sweet spot. Confirms an action where the eye already is.
- Button press state (1, 3). Sweet spot. scale 0.98 on press, and the click feels received.
- Scroll-scrubbed image sequence (5, 5). Set piece. The most expensive one, and the one people remember.
- Word opening into a photo (4, 5). Set piece. An entrance for the first screen.
- Video scrubbed by scroll (4, 4). Set piece. Only with a file that can seek to every frame, otherwise it stutters.
- Pinned horizontal chapter (4, 4). Set piece. Stacked vertically on phones.
- Text that fills on scroll (3, 4). Set piece. For one claim, not for a paragraph.
- Stacking cards that pin (3, 4). Set piece. Four cards, not eight.
- Before-after slider (3, 4). Set piece. Carries where there really is a before.
- Drag carousel with momentum (3, 4). Set piece. With momentum and an edge, otherwise it feels like a form.
- Fullscreen menu with staggered links (3, 4). Set piece. The one place where a big entrance fits every time.
- Color transition on hover (1, 2). Basic. 150 milliseconds, comes with the first stylesheet.
- Focus ring that eases in (1, 2). Basic. The ring is the duty, the softness is a bonus.
- Tooltip fade (1, 2). Basic. A 100 millisecond delay so it does not open on every pass.
- Checkbox tick that draws (2, 2). Basic. Nice in one form, invisible everywhere else.
- Magnetic button (3, 2). Low return. Needs a pointer and explains nothing.
- Custom cursor (3, 1). Low return. Hides the pointer everyone knows.
- Particle background (4, 2). Low return. 60 frames per second for as long as the tab is open.
- Preloader with counter (3, 1). Low return. One to three seconds of waiting that were not there before.
- Typewriter on the headline (2, 1). Low return. Two seconds until you know what the page is about.
- Parallax on every image (3, 2). Low return. One per screen carries, all together they swim.
- WebGL distortion (5, 3). Low return. 150 kilobytes for an effect that touch never sees.
Check the list against a page of your own and you will usually find two or three effects from the last group that made it into the brief because they looked good on someone else's site. There they may have been the one set piece. Here they are the third.
How do you rate your own list?
In five steps, and the list gets shorter than the brief along the way. That is not a side effect, it is the point.
- Write everything down. Every effect in the brief, plus the ones nobody ordered but everyone expects, such as hover states and menus that open.
- Effort with the whole cost. Build, library, frames per second, the reduced-motion branch and the change when the content changes. Count only the build and every set piece lands one step too low.
- Impact by the three questions. Does it explain structure, does it make the page feel finished, does it move someone to act. Three times no is a 1, however pretty the effect.
- Keep what sits two points above effort. Plus one set piece where both numbers are 4 or 5. The rest goes, or stays as a basic if it is already there.
- One duration, one curve, one distance. For every entrance on the page, written down in one place where the next person will find them.
// effort / impact, both 1 to 5const rating = [ { effect: "staggered entrance", effort: 1, impact: 4 }, // build { effect: "count-up", effort: 2, impact: 4 }, // build { effect: "word opens into photo", effort: 4, impact: 5 }, // the one set piece { effect: "magnetic button", effort: 3, impact: 2 }, // drop { effect: "custom cursor", effort: 3, impact: 1 }, // drop];
The list ends up shorter than the brief, and the page is better for it.
