Block Entry Animations (Reveal on Scroll)
A block appears with a fade or slide when it scrolls into the visitor's view. The setting sits in the same place on every block; you just pick one of…
Where to find: Theme Editor → select a block → the Animation tab in the properties panel on the right Who it's for: Anyone who wants to add motion to their storefront In short: A block appears with a fade or slide when it scrolls into the visitor's view. The setting sits in the same place on every block; you just pick one of the ready effects.
What is it for?
By default blocks simply "drop" onto the page. An entry animation makes blocks appear gently as the visitor scrolls down — the page feels more alive and modern.
This is a general setting: it is not specific to individual blocks. Whichever block you select (Hero, Product List, Testimonials, even child blocks inside a grid) you will find the same Animation tab in the properties panel.
Exception: The Header block has no animation tab. Since the header stays fixed throughout the page, an entry animation would make no sense.
Where do I find it?
- Open the Theme Editor.
- Select a block on the canvas (or click it in the layer list on the left).
- Look at the tabs in the properties panel on the right; the Animation tab is at the end.
Effects (presets)
You pick one from the Entry Animation box. Its description says: "Animation played when the block scrolls into view".
| Effect | What does it do? |
|---|---|
| None | No animation (default). The block appears normally. |
| Fade | Goes from transparent to fully visible. |
| Slide Up | Glides up from slightly below. |
| Slide Down | Glides down from slightly above. |
| Slide In Left | Slides in from the left. |
| Slide In Right | Slides in from the right. |
| Scale In | Grows from slightly smaller to its normal size. |
| Blur In | Goes from blurred to sharp. |
The safest and most used pair: Fade and Slide Up. Sticking to one or two effects looks far more elegant than giving every block a different one.
Fine tuning
When you pick an effect, these sliders appear below it (they are hidden while None is selected):
| Setting | What does it do? | Default |
|---|---|---|
| Duration | How long the animation takes. | 600 ms |
| Delay | How long to wait after the block appears before starting. | 0 ms |
| Distance | How far the slide effects travel; the depth of the growth in Scale In and the amount of blur in Blur In. | 24 px |
| Visibility Threshold | What percentage of the block must be on screen before the animation starts. | 15% |
| Play only once | While on, the animation plays once. "When off, the block replays every time it enters the viewport." | On |
| Reveal items in sequence | In blocks containing a list/grid, items appear one by one (stagger). | Off |
| Item Interval | The delay between items in sequential reveal. | 80 ms |
Which blocks benefit from "Reveal items in sequence"? Blocks with many items inside — product lists, testimonial cards, blog lists. For a single-piece block (e.g. one heading) it makes no difference. At most the first 12 items reveal in sequence; the rest arrive together.
Do not overdo the durations. Values above 600 ms make the page feel "slow"; the visitor has to wait for the content.
Previewing in the editor
Blocks stay still on the editor canvas — if the animation played on every click, working would be impossible.
To see the animation, press the Preview button: the editor scrolls to that block and plays the animation once.
Accessibility: reduced motion
The panel states: "If the visitor has reduced motion enabled, the animation is skipped and content shows immediately."
Some visitors turn on the "reduce motion" setting in their operating system (due to dizziness, balance issues, etc.). For them the animation does not run and the content appears directly. This is the correct behaviour and requires nothing from you.
Content is never lost: even if JavaScript does not run, blocks are visible on the page. So the animation never puts your content's visibility at risk — search engines see the content normally too.
Step by step: an elegant entrance for the home page
- Theme Editor → open the home page template.
- Select the Hero block → Animation → Fade, Duration 600 ms.
- Select the "Featured Products" block below it → Slide Up, Delay 100 ms.
- On the same block turn on Reveal items in sequence, Item Interval 80 ms.
- Check with Preview, then Save and Publish the template.
Frequently asked questions
I can't see the Animation tab. The block you selected may be the Header; that tab does not exist there. Select another block and look again.
The animation does not run on the storefront. In order: (1) the preset may be None, (2) you may not have published the template, (3) reduced motion may be on in the visitor's device.
Can I use a different setting on mobile? Yes. The animation field is part of the editor's device-based (breakpoint) mechanism — a value you change while in mobile view applies to mobile only (see Device-Specific Settings (Desktop / Tablet / Mobile)).
Does it slow down the page? No. No extra file/library is loaded for the animation; the browser's own transition capabilities are used.
Can I animate all blocks at once? No, the setting is per block. That is the recommendation anyway: a page where every block animates gets tiring.
Was this page helpful?
Artificial Intelligence (AI) Tools
Artificial intelligence buttons that help you while designing. They suggest icons, write text, generate list items, find images. They all work with a…
Shape Dividers (Wave, Tilt, Triangle…)
You put a shape — a wave, a tilt, a triangle — on the top and bottom edge of a block; the transition between two sections becomes a soft form instead…