Why websites should stop using sliding and animation effects
Slide-in animations and scroll-triggered effects are a web design trend that has quietly been hurting business websites for years. They slow down page load times, damage your Core Web Vitals scores, frustrate mobile users, and can even cause physical discomfort for some visitors. This post explains why they’re a problem, what Google actually thinks about them, and what to do instead to keep your site fast and your visitors happy.
Your web designer added sliding animations to every section of your website. Each block swoops in from the left. Every heading fades up as you scroll. They said it looked “more dynamic.” They said it would keep people engaged.
They were wrong.
This kind of scroll-triggered animation is one of the most common things we see when we audit new client sites, and it’s almost always hurting performance. Website animations UX is a topic that splits opinion in the design world, but the data is pretty clear: for most UK business websites, these effects are doing more harm than good.
Here’s why, and what you should do about it.
Why Do Websites Use Slide-In Animations?
The short answer: because it’s incredibly easy to add them.
WordPress themes like Elementor, Divi, and Astra have animation controls built right in. WooCommerce store builders, Squarespace, and Wix all offer one-click scroll effects. A developer or designer can make an entire website feel like it’s “coming to life” in under an hour, and it looks impressive in a demo.
It also looks good on a fast desktop machine with a wired connection. The designer builds it that way, and that’s how it gets signed off.
The problem is that most of your visitors aren’t on a fast desktop machine. They’re on their phone, on a 4G connection, maybe on a bus. And on that device, the site they’re visiting tells a very different story.
The animation trend has been pushed heavily by design awards sites, agency portfolio showcases, and theme marketplaces, where visual impact counts for everything and performance counts for nothing. That’s a very different brief to “help this plumber in Bromley get more enquiries.”
What Do Slide-In Animations Actually Do to Your Page Speed?
Scroll-triggered animations add JavaScript that executes on every scroll event, competing with the browser’s main thread for processing time. On mobile devices, this regularly pushes your Interaction to Next Paint (INP) score above Google’s 200ms threshold, meaning your site feels slow and unresponsive to real users.
That’s not a minor issue. It affects real visitors, right now.
Most slide-in effects use JavaScript libraries like AOS (Animate On Scroll) or GSAP ScrollTrigger. Every time a user scrolls, these scripts check whether elements have entered the viewport, calculate positions, and trigger repaints. On a mid-range Android phone, that takes time. The browser has to delay responding to taps and swipes while it finishes those calculations.
This shows up in two Core Web Vitals metrics: Interaction to Next Paint (INP), which became a ranking factor in March 2024 and measures how quickly your page responds to interactions, and Cumulative Layout Shift (CLS), which measures how much elements move around unexpectedly as the page loads.
Slide-in animations are a direct cause of poor CLS scores. When content loads off-screen and slides into position, it causes exactly the kind of unexpected layout shift that Google penalises.
The numbers back this up. Half of online users say they would rather skip animations and video altogether if it meant faster load times. That’s your potential customers telling you, in plain terms, what they want.
Are Animations a Google Ranking Problem?
Yes. Animations won’t tank your rankings on their own, but they routinely push Core Web Vitals scores into the “needs improvement” or “poor” bands. Core Web Vitals are confirmed Google ranking signals, and poor scores reduce your chances of ranking as well as your content deserves.
Google’s own documentation on Core Web Vitals and Search ranking sets the thresholds clearly: INP must be under 200 milliseconds, CLS must be under 0.1, and LCP (Largest Contentful Paint) must be under 2.5 seconds. All three are measured using real user data from Chrome. All three can be pushed into the red by poorly implemented animations.
The broader picture is sobering. As of July 2025, only 53% of websites met all three “good” Core Web Vitals thresholds. That means nearly half of all sites are already failing at least one metric, and heavy animations are one of the most common culprits.
When two pages are competing for the same ranking position and their content quality is similar, Core Web Vitals become the tiebreaker. A clean, fast site beats an animated but sluggish one. Every time.
If you want to understand how Google ranks pages and why technical performance matters alongside content, our guide covers this in full.
The Mobile Problem Nobody Talks About
On mobile, animation libraries that feel subtle on a desktop feel jerky, intrusive, and slow. Mobile pages take on average 70.9% longer to load than desktop pages, and a JavaScript animation library running on the main thread makes that gap even wider.
This matters enormously, because 53% of mobile visitors abandon a page if it takes more than three seconds to load. Not five seconds. Three.
When we audit client sites, one of the first things we check is how the page behaves on a throttled mobile connection using Chrome DevTools. More often than not, sites that look fine on desktop are a juddering mess on mobile: content shifting as it slides into view, taps not registering because the main thread is busy, the page feeling broken rather than dynamic.
The issue is also about user control. On desktop, people scroll deliberately. On mobile, they swipe quickly and expect the page to keep up. An animation that takes 400ms to complete is pleasant on desktop and infuriating on a phone. That frustration translates directly into higher bounce rates, fewer enquiries, and lower conversions.
Conversion rates drop by an average of 12% for each additional second of mobile load time. If your animation library is adding even one second to your load time, you are paying for that in lost business, every single day.
If you’re investing in mobile-friendly web design, it’s worth making sure animations aren’t quietly undermining the work being done elsewhere on performance.
Animations Can Actually Make People Feel Sick
This isn’t an exaggeration. The W3C’s Web Content Accessibility Guidelines specifically identify parallax scrolling and scroll-triggered animations as triggers for vestibular disorders, with documented reactions including dizziness, nausea, and headaches.
Vestibular disorders affect the body’s balance system. They affect more than 70 million people globally. For these users, a website where everything slides and swoops isn’t just annoying. It can genuinely cause physical discomfort.
The WCAG guidelines at Success Criterion 2.3.3 state clearly that motion animation triggered by interaction must be able to be disabled, unless it is essential to the content. Decorative slide-in effects are, by definition, not essential. They exist purely for aesthetics.
There is a CSS media query called prefers-reduced-motion that lets browsers communicate the user’s preference for reduced motion to your website. Browsers across Windows, macOS, iOS, and Android all support it. If your animation library doesn’t respect this setting, and most WordPress animation plugins don’t by default, your site is actively working against the accessibility needs of a significant chunk of your audience.
The practical implication: if your animations can cause nausea and you haven’t implemented reduced-motion support, you have a problem that goes well beyond SEO.
What Should You Actually Do With Your Site?
The first step is to check whether your animations are causing a measurable problem. Run your site through Google PageSpeed Insights and look at the mobile scores. Focus on INP and CLS in particular. If either is in the “needs improvement” or “poor” bands, animations are a very likely contributor.
In Chrome DevTools, you can throttle your connection to “Slow 4G” and watch exactly how your page behaves on a mid-range mobile device. If content is visually jumping around or interactions feel delayed, you have your answer.
The biggest offenders are sitewide animation libraries: AOS.js, WOW.js, and the built-in scroll effects in Elementor, Divi, and Beaver Builder. These apply JavaScript-driven animations to every element on every page load. Disabling them is usually the single highest-impact change you can make.
In Elementor, Divi, or other builders, look for “Motion Effects” or “Scroll Effects” panels on each section. Turn them off. In WordPress, check your active plugins for anything with “animation,” “scroll effects,” or “entrance effects” in the name.
Not all animation is harmful. A simple opacity fade applied via CSS on a small number of key elements adds polish without blocking the main thread. The difference is whether the animation triggers layout recalculation. Animating opacity and transform is GPU-accelerated and performance-safe. Animating height, width, top, or left triggers layout reflows and causes the CLS issues described above.
If you genuinely want to keep some scroll animations, implement the prefers-reduced-motion media query so users who need a static experience get one. It’s a few lines of CSS and it’s the minimum responsible standard.
The honest advice, though: for the vast majority of UK service business websites, the right call is to remove the animations entirely. Your site will load faster, score better, convert better, and work for more people.
If you’d like us to take a look, request a free SEO audit and we’ll check your Core Web Vitals alongside everything else. Or if you’re ready to talk about what’s holding your rankings back, get in touch with us directly.
Frequently Asked Questions
Do slide-in animations directly hurt my Google rankings?
Not directly in isolation, but they consistently damage the Core Web Vitals metrics that Google uses as ranking signals. Scroll-triggered animations are a primary cause of poor Interaction to Next Paint (INP) and Cumulative Layout Shift (CLS) scores. Both are confirmed Google ranking factors. When your animations push either metric into the “needs improvement” or “poor” band, your rankings are being held back as a result. Google’s own documentation confirms all three Core Web Vitals thresholds must be met at the 75th percentile of real user data.
Which WordPress plugins cause the most animation-related performance problems?
The most common culprits are sitewide animation libraries: AOS (Animate On Scroll), WOW.js, and the built-in scroll effects in Elementor, Divi, and Beaver Builder. These plugins apply JavaScript-driven animations to every element on every page load, meaning the main thread is competing with animation calculations from the moment a visitor arrives. Page builder animation features are particularly problematic because they’re easy to enable and rarely reviewed once set. Disabling them is usually the quickest performance win available without a full redesign.
What is CLS and why do animations affect it?
Cumulative Layout Shift (CLS) is a Core Web Vital that measures how much content moves unexpectedly as a page loads. Google’s threshold for a “good” CLS score is 0.1 or below. Slide-in animations contribute to CLS because they involve elements loading off-screen and moving into their final position. If that movement happens as the page is still loading, it registers as an unexpected layout shift. Browsers record the cumulative total of all these shifts throughout a page’s lifetime, so even small animations on multiple elements add up quickly.
Can I keep any animations without hurting my Core Web Vitals?
Yes, if they’re implemented carefully. Animations that use only the CSS transform and opacity properties are GPU-accelerated and don’t trigger layout recalculations, meaning they have minimal impact on CLS and INP. Simple fades on a small number of elements are very unlikely to cause problems. The animations to avoid are those that animate layout properties like height, width, top, or left, and those driven by JavaScript scroll listeners. You should also implement the prefers-reduced-motion CSS media query so users with motion sensitivity receive a static version of your page.
How do I check if my site’s animations are causing performance problems?
Start with Google PageSpeed Insights: run your most important pages on mobile and check the INP and CLS scores. A score in the “needs improvement” or “poor” range is a signal to investigate. In Chrome DevTools, open the Performance tab, throttle your connection to “Slow 4G,” and record a page load. Look for long tasks and layout shift events in the timeline. You can also use Google Search Console’s Core Web Vitals report, which shows real-user data across all your pages grouped by performance status. If you’d rather have someone else do the digging, our free SEO report covers Core Web Vitals as part of a full technical audit.
