Animated website: examples, technique and acceptance

An animated website can show how a product works or confirm an input. It can also make the offer harder to reach. What decides is the job the movement takes on.

Before designing, a simple question is worth asking: what should be clearer after the effect? If the only answer is “the page feels more modern”, a solid reason is still missing.

An animated website needs a named job for every movement: explaining a state change, confirming an input or showing a product. At acceptance, what counts is whether that job is still done with a keyboard, on a phone and with reduced motion.

When an animated website helps the content

Movement helps when it explains a relationship, keeps orientation or confirms an action clearly.

Three jobs are easy to tell apart. Animation can guide the eye, explain a relationship or respond to an action. These jobs need different means.

Job	Possible use	Check question
Orientation	Transition between related views	Does the relationship stay visible?
Explanation	Showing how a product is built	Do you understand more afterwards?
Feedback	Confirmation after a choice	Is the new state clear?

A decorative background can add atmosphere. It should neither cover headings nor compete with important controls. A contact form above all needs understandable fields and clear feedback.

Scroll animations need a readable base

Content revealed on scroll can structure sections. It becomes a problem when every paragraph has to wait for its entrance. Someone looking for a specific piece of information should reach it without staged delay.

Normal scrolling should stay reliable too. An effect that convinces on a large screen can make orientation harder on a small phone. The mobile version therefore needs its own decision on scope and pace.

A good base already works as a calm page. Headings, product information and contact routes are there. Movement adds to this structure instead of making it accessible in the first place.

A real example: Pucca Diana

For Pucca Diana, Alkeme Design developed the brand, website and Instagram presence together. In the website intro the monogram draws itself. That is a concrete use of the mark within the brand system.

The project data describes natural downward scrolling on the phone instead of the horizontal film. The example shows an important design decision: an effect does not have to appear identical on every device. The job of each view sets how much movement is appropriate.

No general increase in enquiries can be derived from this. The example evidences the design and its mobile adaptation, not an isolated sales effect of the animation.

Less movement must be possible

Some people find large-scale movement distressing. The system setting “reduce motion” can be respected through prefers-reduced-motion. Decorative effects can then be dropped or replaced by calmer state changes.

The W3C explains in WCAG success criterion 2.3.3 (Animation from Interactions) why unnecessary motion should be possible to switch off. It is a level AAA criterion. This single measure does not replace a full accessibility review.

Equivalence of content remains important. A reduced view must not hide product details. Confirmation of a successful input must stay visible, even when its animation is dropped.

What should be settled in the offer

Describe the planned effects one by one: logo intro, product display, transitions and feedback. Include the mobile version and the reduced-motion view. That makes the scope reliable to discuss.

Alkeme Design prices motion design as a fixed price by scope and does not name a flat animation surcharge. The motion design page describes the possible components.

Acceptance includes real use situations: jumping straight to a service, using a form and opening the page on a phone. Also check whether information is reached quickly on a slow connection. An impressive opening alone does not answer these questions.

What kinds of website animation are there?

Website animations can be distinguished by their job and their trigger. An intro that starts automatically is a different case from feedback after a click. This distinction affects design, technique and the ability to reduce motion.

Type	Trigger	Sensible job
Intro	Opening the page	Briefly introduce the brand
State change	Click or input	Connect choice and result
Scroll effect	Moving through the page	Explain related content
Product animation	Deliberate start or selection	Show build and function
Background motion	Automatic or continuous	Add atmosphere

Start with the job that is actually missing. If an input is already confirmed clearly, it does not need extra staging. If a product build is hard to understand, a targeted explanatory sequence can make sense.

Which animation suits which job?

A loading indicator confirms a running request. A transition between product variants shows what has changed. A brand intro, by contrast, puts the staging first. These cases need separate decisions on trigger, duration, repetition and cancellation.

In the Pucca Diana project the monogram draws itself in the intro. The project documentation also describes twelve chapters on desktop and vertical scrolling on the phone. The example evidences adapting the mechanism to the device; it does not demonstrate a higher enquiry rate.

Animated website with CSS, JavaScript or video?

The right technique depends on the intended result and the integration. CSS can be enough for simple state changes. More complex flows can need JavaScript. A finished, designed sequence can sometimes be used as video.

What matters is how the solution behaves day to day. Can the movement be paused or reduced? Does the page stay usable if something fails technically? Does the file display sensibly on a phone? Choosing a tool does not answer these questions yet.

Existing animation files must also suit the target environment. Some need extra runtime code in the browser, others play as finished video. Discuss dependencies and updates with whoever will maintain the website later.

A simple implementation is appropriate if it does the job. Extra technical build needs a specific reason, not just the availability of a particular effects library.

CSS, JavaScript or video?

For the design we suggest this split:

Job	Technical approach	Acceptance
Button state	CSS transition	State understandable without motion
Multi-step product flow	JavaScript with explicit states	Check back, repeat and cancel
Rotating product shot	Video with a still image	Content available without playback
Spatial staging	WebGL only with a justified need	Provide an alternative view

These are planning decisions, not guaranteed size or speed advantages. The Posh Stink project documents a WebGL particle website; that is no recommendation to use WebGL for a contact form.

Build an understandable page without effects first

A calm base version shows whether content and order already work. Build headings, images and contact routes first without delayed reveals. That shows whether the page actually explains the offer.

Only then check where movement can improve a relationship. Perhaps a small state change on a product selector is enough. Perhaps an explanatory image sequence is missing. The result should add to the content, not cover a missing structure with effects.

This order also makes a reduced version easier. When the information is complete in the base view, a reduced-motion version does not need a new content presentation invented for it.

Mobile use needs its own decisions

On the phone the same job has to work with less space and different input. An effect that follows a mouse pointer cannot be used there unchanged. Wide horizontal flows may need a different presentation. In the Arabic version, the direction of horizontal movement itself is checked against its function.

Check which parts must stay and which can go. An explanatory product change may stay useful, while a decorative pointer-follow effect is dropped. The content should not depend on the device; the staging may differ.

In the Pucca Diana project the mobile mechanism is explicitly described differently: the horizontal film becomes natural downward scrolling. That documented detail shows a design adaptation. It says nothing general about how long people stay on mobile websites.

Check loading and use together

The quality of an animated website shows in whether content is reachable early and use stays reliable during effects. A small file alone does not prove smooth rendering. Equally, an elaborate sequence is not automatically needed on every page.

Test on a real phone and with a slower connection. Can navigation be used before all decorative media has loaded? Do buttons stay where expected? Is text kept invisible only because an animation script has not run yet?

When problems appear, the first question is about the necessary scope. Removing an unnecessary effect can make more sense than extra technical work on a movement with no clear job. Further optimisation is only worth it for justified animations.

Measure mobile rendering and performance

In the Pucca project the content stays on the phone while the horizontal staging is dropped. That is a concrete pattern for a separate mobile implementation. A comparison needs the same URL, the same content and the same measurement conditions with and without the effect.

Google’s Web Vitals guidance defines good values as LCP within 2.5 seconds, INP of 200 milliseconds or less and CLS of 0.1 or less, measured at the 75th percentile of page loads. These thresholds are not measured values for the project mentioned. A lab run and field data are reported separately in the acceptance report.

Distinguish reduced motion from content that plays automatically

A reduced version should remove unnecessary movement and keep the information. That covers, for example, large-scale sliding or spatial effects. A calm state change can convey the same feedback without forcing the same movement.

For content that plays automatically, also check whether a way to pause, stop or hide it is needed. The W3C treats that question separately in the criterion “Pause, Stop, Hide”. The prefers-reduced-motion setting alone does not answer every question about media that starts on its own.

Go through the effects one by one and define their calm alternative. Switching off every animation at once can also remove important feedback. The reduced view therefore belongs in design and testing as a state of its own.

Accessibility: check two rules separately

WCAG 2.2 criterion 2.2.2 covers, among other things, movement that starts automatically, lasts more than five seconds and appears alongside other content; read the criterion’s exceptions with it. Criterion 2.3.3 covers interaction-triggered motion that can be switched off, at level AAA.

For the brief we suggest a visible pause control where needed and a calm version for the operating system’s reduce-motion setting. Checking individual criteria is not yet full evidence of conformance.

When is a template with simple effects enough?

A template with a few existing effects can be enough if its structure and functions suit the job. Check how it actually behaves, not just the demo page. Put in your own text and images, and test the reduced view and the Arabic version.

For a small information site, custom motion may be unnecessary. Good typography, suitable images and clear contact routes can be the more important work. A simple effect can stay an extra.

Custom design makes more sense when movement explains a specific product function or is part of a distinct brand presence. Even then, not every subpage needs the same effort. Limit the scope to the places with a justified job.

Plan costs for the whole implementation

Costs depend on the number and complexity of flows, the device versions and the technical integration. A finished exported clip is a different scope from an interactive display with several states. Testing and reduced versions need planning too.

Alkeme Design’s price list gives a starting point for a custom-designed website: it starts from $2,400 (≈ AED 8,800). That figure is not a flat price for any animation. Motion design is priced by scope; the fixed price after the first call should name the planned flows one by one.

If the budget is limited, start with the most important explanatory or functional use. Further decorative movement can be added later. That keeps the first commission manageable and aimed at an actual job.

Agree costs and deliverables

At Alkeme Design, the starter website starts from $2,400 (≈ AED 8,800), the business website from $6,400 (≈ AED 23,500) and the interactive website from $12,000 (≈ AED 44,050). Motion design is offered according to the agreed scope. The animation is therefore described in the offer by scenes, integration effort and exports.

For handover we suggest a list of trigger, duration, playback control, still image and reduced-motion behaviour. File size and codec come from the delivered export; without that file we name no kilobyte figure. ESA’s reel is documented, but it is no evidence for the length of the Pucca intro.

Checklist for accepting an animated website

A useful acceptance covers normal use, reduced motion and technical exceptions. Check at least these situations:

• Open a specific service directly, without waiting for the intro.
• Navigate the page with a keyboard and on a phone.
• Submit a form and understand its feedback.
• Turn on the system setting for less motion.
• Read content on a slow connection and reach the contact routes.
• Go back, or open a subpage directly.
• Pause media that plays automatically, where relevant.
• Repeat the checks on the Arabic and the English version.

Record problems with the specific device, page and action. “The animation feels restless” is a start. A reproducible description shows which spot needs changing and how the fix can be checked.

Acceptance along a specific flow

The suggested test starts on a service page: read the content, use navigation, start an enquiry, go back. Then repeat the same flow with reduced motion. An error log records URL, device, setting and observed behaviour. This is a test plan, not a user test already carried out.

The model is the documented separation of desktop and phone mechanics at Pucca. For a new web design project, only then is it decided which movement actually improves the information.

Which animations to drop first?

Drop effects without a clear job, or with noticeable barriers to use, first. That can include intros repeated on every page change, text that appears late, or constantly moving backgrounds next to longer content. The assessment depends on the specific flow.

Test each movement with the question of whether the information stays just as understandable without it. If yes, a calmer version may be enough. If not, the movement should explain deliberately and also have an equivalent alternative. That selection limits scope and makes the remaining effects easier to check.

An existing website does not have to be rebuilt for this. A targeted reduction of problematic effects can often be a sensible first step. After that you can judge whether further design or technical work is needed.

Start with a clear job

For planning, a list of the most important pages and actions is enough to begin with. Mark where an explanation is missing or feedback is unclear. That is where the benefit of movement can be tested concretely.

If the real problem is an offer people do not understand, the content needs work first. After that you can decide which animation actually improves the page. For animated logos in particular, see animated logo.