Picture a landing page for a furniture workshop. Someone worked hard on it: the headline fades in from the fog, photos of tables slide in from the left, benefits appear one by one, and the background drifts lazily the other way from the text. On a large monitor, in a quiet room, it looks beautiful, and the person who made the layout has every right to be proud.
Now open the same page on the metro. Someone is in a hurry, scrolling with a thumb straight to the prices, while the blocks are still lining up to slide in. A couple of seconds of empty screen, then everything appears at once. The landing page behaves like a magician who must pull a rabbit out of a hat before every answer. The first time it is fun. By the third you just want the price.
Motion that explains something
Animation has a job it does better than a static interface. A button changes slightly when pressed, and the person knows the press counted. A product “flies” into the cart, and it is clear where it went. A list opens smoothly, and you can see where the new items came from. That kind of motion connects two states of the interface and answers “what just happened”.
Decorative motion works differently. It sets a mood and shows the character of the brand, and that can be valuable too, especially on an image page. The cost of getting it wrong is different. Remove functional animation and the interface becomes less clear. Remove decorative animation and the page gets calmer, with exactly the same information left on it. I find it useful, before each effect, to say honestly which of the two groups it belongs to.
When an effect starts to get in the way
The most common problem is blocks appearing on scroll. While someone reads slowly, everything is fine. When they scroll fast, the content falls behind its own animation, and for a moment the page looks empty or not yet loaded.
The second story is more serious, and it is not only about convenience. The W3C understanding of success criterion 2.3.3, “Animation from Interactions,” says that motion triggered by scrolling can cause dizziness, nausea, and headache for some people. Parallax is named there as an example of animation that is often not essential. This is a level AAA criterion, the strictest level, and the W3C does not require every site to meet it. The fact that an effect can literally make some visitors feel sick is still worth weighing when you choose.
There is a simpler requirement too. Under criterion 2.2.2, level A, moving content that starts by itself, lasts more than five seconds, and is shown alongside other content must give the user a way to stop it, pause it, or hide it. An endless ticker, or a slider that advances on its own with no pause button, is exactly that case.
Can you get through the site without motion
A good check for any animated page is to switch every effect off in your head. Is the text still visible? Is it clear where to press? Is important information hiding in an element that appears only after an animation? If the whole scenario depends on motion, that is a reason to rethink it.
Phone and computer settings include reduced motion, and a site can honor that setting. Among the sufficient techniques in the W3C understanding of criterion 2.3.3 is the CSS media feature prefers-reduced-motion. The ways to meet the criterion are stated simply: avoid unnecessary animation, give the user a way to turn it off, or use the system reduced-motion setting. Any of the three is better than none.
A landing page that does not make you wait
Animation on a landing page is easier to plan together with the page scenario: where motion hints at the next step, and where the visitor needs to read the price calmly and send a request. Then the effects serve the page goal instead of arguing with it.
What Tilda offers, and what to decide first
In Zero Block every element has animation settings. According to the help on basic animation, that means an entrance animation (a simple fade-in, a slide from any side, and a zoom-in) with duration, delay, and a trigger point, parallax on scroll and on mouse movement, and a fix-on-scroll effect. Besides the basic set, there is step-by-step and trigger animation for more complex scenarios.
There are many options, and that is its own trap: each effect is set on a specific element, and the editor will not invent a shared rule for “how things move on this site.” Better to agree that rule before you build. Another practical detail from the mobile-version help: animation does not run in the mobile editing mode, so you watch how effects behave on a phone in preview or on the published page.
How to decide whether to keep an effect
I would ask every effect three questions. What will a person understand because of it? Does it delay the path to the main action on the page, the price, the form, or the order button? What will a visitor with reduced motion see, or someone scrolling on an inexpensive phone? If there is no answer to the first question and the answer to the second is “yes,” the effect is probably extra.
If a live site has collected so many effects over the years that the page entertains more than it sells, they can be reviewed as an improvement, without redesigning everything. The furniture workshop from the start of this article would only need to keep the headline fade-in and a smooth response on the buttons, and let the tables stay put. Furniture, on the whole, looks better that way.