The short verdict
- Stutter happens when the browser cannot finish a frame in about 16 milliseconds.
- Most causes are animating the wrong properties, too many things at once, or heavy work on scroll.
- Test on a mid-range Android phone. If it is smooth there, it is smooth almost everywhere.
01Why it is fine on your laptop
A recent laptop has a fast processor, a strong graphics chip and plenty of memory. A mid-range phone has a fraction of that, and it is also decoding images, running the page’s JavaScript and handling touch scrolling. An animation that uses 5 milliseconds a frame on a laptop can need 25 on a phone. At 60 frames a second, the budget is about 16. Over it, frames drop and the motion jerks.
02The usual causes
Animating layout properties
Changing width, height, top, left, margin or padding forces the browser to work out the layout of the page again, often every frame. Animating transform (move, scale, rotate) and opacity can usually be handled by the graphics chip without touching layout. That one change fixes a large share of stutter.
Expensive paint
Large blurs, big box shadows, backdrop filters and gradients that change every frame are costly to redraw. Glass effects over moving content are especially heavy on phones.
Work tied to the scroll event
Code that runs on every scroll event, reads element positions and writes styles back, makes the browser recalculate layout over and over. Libraries like GSAP’s ScrollTrigger batch this work properly. Hand-written scroll listeners often do not.
Too much at once
Fifty elements fading in at the same moment, each with its own trigger. Stagger them, or animate a parent instead of every child.
Huge images and videos
A 4000-pixel image being scaled during scroll, or a background video playing behind a scroll animation. The device is decoding and moving far more pixels than it shows.
03The fixes
- Animate transform and opacity only, wherever possible.
- Use will-change sparingly. It can help, but applied to everything it wastes memory and can make things worse.
- Use a proper scroll library or the CSS scroll-driven animations now in modern browsers, not raw scroll listeners.
- Reduce on small screens. Fewer parallax layers, simpler effects, sometimes none.
- Size images for the device with responsive image sources.
- Pause off-screen work. Stop videos and loops that are not visible.
“Smooth motion is not about doing more. It is about asking the phone for less.”
04How to find the problem
In Chrome DevTools, open the Performance panel, turn on CPU throttling at 4x or 6x to simulate a phone, and record while you scroll. Long frames show up as red bars, and the flame chart shows whether the time went on scripting, layout or paint. The Rendering panel can also flash areas being repainted, which makes expensive effects obvious. Then confirm on a real mid-range phone.
05Questions people ask
Does stutter affect Core Web Vitals?
Heavy scroll work can delay responses to taps, which shows up in Interaction to Next Paint. Layout-shifting animations can affect Cumulative Layout Shift too.
Is GSAP heavy?
The core library is small for what it does. The weight comes from what you ask it to animate, not from the library.
Should I turn off animations on mobile?
Not always. Simplify them. Many effects can run well on phones if they animate the right properties.
Can you fix stutter on my site?
Usually without removing the effect. Send us the link and we will find what is slowing it down.
