Many Webal Blocks modules can move in as the visitor scrolls to them, and some can move a little as the page scrolls past (parallax). They all use the same Animation and Scroll movement (parallax) settings, so once you know them you know them everywhere. This page explains them for the person building the page.
The animation is decoration. The content is never hidden for good: with JavaScript off, with reduced motion turned on, or when printed, every part is simply visible.
The Animation settings
Open the module's Animation tab. The group is called Animation.
| Setting | Choices | What it does |
|---|---|---|
| Entrance effect | None (default) and the effects listed below | The effect that plays when the block appears. |
| When it plays | When it scrolls into view (once) (default), When it scrolls into view (every time), When the page loads | Once: the first time it is seen. Every time: each time it comes into view again. When the page loads: as soon as the page has loaded, whether or not it is in view. |
| Delay (milliseconds) | 0 to 5000, in steps of 50 (default 0) | How long to wait before the effect starts. |
| Duration (milliseconds) | 0 to 5000, in steps of 50 (default 0) | How long the effect lasts. Leave it at 0 to use the site's default length. |
| Animate | The whole block (default), Each item in turn | Each item in turn plays the effect on the cards, features or logos inside the block, one after another. It only works in modules made of repeated items. |
| Gap between items (milliseconds) | 0 to 2000 (default 100) | Shown for Each item in turn. How long each item waits after the one before. With 0 all the items appear together. |
| Quick version | Yes or No (default No) | Plays the effect in a fifth of the usual time. It has no effect when you set a duration of your own. |
The When it plays, Delay, Duration and Quick version settings are hidden until you choose an effect. The Gap between items setting is hidden unless you choose Each item in turn.
The effects
Each effect moves or fades only the element it is on. Their names are the labels shown in the Joomla field.
| Label | What a visitor sees |
|---|---|
| None | Nothing moves. The block is simply there. |
| Fade in | It goes from invisible to solid. It does not move. |
| Grow in (starts smaller) | It fades in and grows from a little smaller (80 percent of its size) to its normal size. |
| Shrink in (starts larger) | It fades in and settles from a little larger (120 percent) to its normal size. |
| Slow zoom (Ken Burns, for images) | A picture slowly zooms in, one pass, from its normal size to a little larger. Use it for pictures only. |
Fade in from a side: four sizes in every direction
The list groups the sliding effects by direction. Fade in from the start and from the end come first: they follow the reading direction, so on an English page the start is the left and the end is the right, and on a right-to-left page (Arabic, Hebrew) they swap sides by themselves. Choose these unless you really want one fixed side. Fade in from the top and bottom follow with the same four sizes. Fade in from the left, always and from the right, always come last: they always start from the left or the right of the screen, in every language, which is what you want for a picture that must come from a fixed side. Each direction has the same four sizes, shown as for example Fade in from the start, small:
| Size | Distance it travels into place | Direction groups |
|---|---|---|
| small | 10 pixels | start, end, top, bottom, left, right |
| medium | 50 pixels | start, end, top, bottom, left, right |
| large | 100 pixels | start, end, top, bottom, left, right |
| full | the whole height (top, bottom) or width (start, end, left, right) of the item | start, end, top, bottom, left, right |
Every effect also fades the content in while it moves. Use the full size with care on large blocks, because the item crosses its whole width or height. Distances above 100 pixels are not offered, apart from full. Pages saved before the large size existed keep working: small, medium and full are the same as before (the old labels were "short", "medium" and "full distance").
Reduced motion. A visitor whose device asks for less motion never sees any of these effects, in any size: the content is simply there. Only movement and fading are animated, so nothing changes the layout of the page.
Parallax: scroll movement
The Scroll movement (parallax) group is a separate group. It moves, resizes, turns or fades a part of the page as the visitor scrolls past it. It is best for pictures, backgrounds and decoration. It is off until you choose Yes for Move with the scroll.
| Setting | What it does |
|---|---|
| Sideways: at the start and at the end | How far the part moves sideways when it first appears at the bottom of the screen, and when it has gone off the top. A number of pixels, or a number followed by %, vw or vh. Negative numbers move it left. |
| Up and down: at the start and at the end | The same for vertical movement. Negative numbers move it up. |
| Size: at the start and at the end | Its size as a multiple of its normal size: 1 is normal, 0.5 is half, 2 is double. |
| Turn: at the start and at the end (degrees) | How far it is turned. Positive numbers turn it clockwise. |
| Fade: at the start and at the end (0 to 1) | How solid it is: 0 is invisible, 1 is fully solid. |
| Size and turn around | The point that stays still while it changes size or turns: Centre (the default), a corner, or the middle of an edge. Start and end corners follow the reading direction (the start is the left in English and the right in Arabic or Hebrew); the corners marked always are always on that side of the screen. |
| Speed curve | A number from -2 to 2. 0 moves at an even speed. Above 0 it starts slowly and ends faster; below 0 it starts quickly and ends slowly. |
| Starts at and Ends at (% of the scroll) | Where in its pass across the screen the movement begins and finishes: 0 is when it appears at the bottom, 100 is when it has gone off the top. The end must be higher than the start. |
| Run from screen width | The smallest screen width the movement runs on: All screen sizes, or from 576, 768, 992, 1200 or 1400 pixels. Below it the part stays still. Phones are the usual place to switch it off. |
Leave a movement blank for no movement. A movement with only a start, or only an end, runs from or to its normal state.
The site switch and the default length
The site's Animations setting (in the Webal Blocks options, Motion tab) switches every entrance effect and every parallax off at once. Each module can still choose its own effect when it is on. The Default animation length (100 to 3000 milliseconds, 500 by default) is the length an effect uses when the block leaves Duration at 0.
What a visitor gets
- Only movement and fading. The effects change only the position, size, turn and opacity of an element. Nothing changes the layout, so the rest of the page does not move or reflow.
- Each element plays once (or every time it scrolls in, if you choose that). A reveal never ends hidden, and it never plays a second time unless you choose every time.
- Items in turn appear one after another with the gap you set, in the order they sit on the page.
- Entrance effects are short. They run once, by default in half a second, when the block is reached. There is no pause control for any effect; the slow zoom is the one that runs for several seconds (see Accessibility).
With JavaScript off
Nothing is hidden. The page shows every block in its place, with no animation. Parallax does not move anything: the part stays where the page puts it. This is by design, so no content depends on a script.
Reduced motion
A visitor who has asked their device for reduced motion sees the page with every effect and every parallax switched off. The blocks are shown at once, in their normal place. Nothing waits for a scroll, and nothing moves. If the device setting changes while the page is open, a block that has already been shown stays shown.
Performance
- Only transform and opacity are animated. The browser can run them on its own compositing thread, so they stay smooth while the page is busy.
- The hidden start state only applies with JavaScript. Blocks start transparent so they can fade in. That means a block that sits above the fold stays invisible until the page's scripts have started. Do not animate the main heading, the top picture of the page, or the largest block a visitor sees first. Animate what comes after it.
- Parallax uses the browser's own scroll-linked animation where it exists. Other browsers use a single shared frame loop that does the same job. Elements are measured once and watched only while they are near the screen.
- Use Each item in turn sparingly on long lists. The gap between items adds up: 20 items with a gap of 100 milliseconds take about 1.9 seconds to start the last one, plus the length of the effect.
Accessibility
- Reduced motion is respected (see above), and it is the visitor's choice, not the page's.
- Nothing flashes. The effects are fades and moves, with no quick flicker.
- The words stay in order. Moving a block does not change the reading order or the tab order.
- Parallax is driven by the visitor's own scrolling, not started by the page.
- Slow zoom (Ken Burns) starts by itself and runs for a few seconds on its own, with no pause control. Check it against WCAG 2.2.2 (moving content that starts by itself for more than five seconds, next to other content) before you use it beside text. The effect stops at its end state and does not repeat.
- Printing shows every block in its place, with no animation.