Animate to explain, keep it to transforms and opacity, respect “reduce motion”, mirror directions for Arabic, and measure whether it changed anything.
Two websites sell the same service. On the first, everything slides, fades and floats; the page takes a moment to settle every time you scroll. On the second, nothing moves at all. Neither is right. The useful question is not “how much animation?” but “what is each movement for?”
Motion should explain, not decorate.
Good interface motion does one of three jobs. It shows where something came from or went, so a menu feels attached to the button that opened it. It confirms an action, so a tap on “send” visibly does something. Or it guides attention to the next step without a flashing arrow.
If a movement does none of those, it is decoration. Decoration is allowed, in small amounts, on pages where people are not in a hurry. The enquiry form is not one of those pages.
Four moves that earn their place.
Staggered reveals bring sections in as you reach them, a few milliseconds apart, so the eye reads them in order. Hover and press feedback tells a visitor that a card or button is interactive. Loading states keep people patient. Page transitions make moving between pages feel like one site rather than a series of reloads.
Each one should be quick, consistent and the same across the site. The demonstration below plays once, when it enters the screen, the way section reveals do on this page.
Keep it fast.
Animate position with transforms and visibility with opacity, and almost nothing else. Animating size, margins or layout forces the browser to recalculate the page on every frame, which is where stutter and battery drain come from. Avoid animations that fire on every scroll event.
Heavy effects also show up in Google’s page experience measurements, which look at how quickly a page responds and how much it shifts around while loading. A site that feels smooth on a new laptop may feel sluggish on a three-year-old phone on a weak connection, which is how many visitors in Oman will see it.
- Transforms and opacity only; no animated widths, heights or margins.
- Durations between 150 and 400 milliseconds for interface, longer only for intentional reveals.
- Reserve space for anything that loads later so the layout does not jump.
- Test on a mid-range Android phone over mobile data, not only on the office Wi-Fi.
Respect “reduce motion”.
Phones and computers have a system setting for people who find motion uncomfortable, and websites can detect it. Accessibility guidance treats interaction-triggered animation as something users should be able to turn off unless it is essential. Build the calm version alongside the animated one: same content, instant appearance. WCAG 2.3.3, Animation from Interactions
This site does exactly that: reveals, cover artwork and the demonstrations in this article become static when the visitor has asked for less motion.
Arabic changes the direction.
On an Arabic page, reading starts on the right. A panel that slides in from the left on the English site should enter from the right. Carousels advance the other way. Progress bars fill from the right. Arrows point the other way. None of this happens automatically unless the animation was written with direction in mind.
Test both language versions of every animated component. A motion that feels natural in English and backwards in Arabic quietly tells half your visitors the site was not really made for them.
Measure whether it helped.
Animation is a design decision, so treat it like one: look at how far people scroll, how often they interact with the animated element, and whether enquiries changed after it was introduced. Keep the moves that earn attention; remove the ones that only cost loading time.
A site can feel alive with very little motion, as long as every movement has a reason. The goal is a visitor who notices the brand, not the animation.
FROM THINKING TO DOING
Let’s make your website feel alive—and fast.
We design and build motion that explains your product, in both languages, without slowing the page down.
