Add animation to a module¶

Getting started

Most modules can play a short entrance animation as they scroll into view. It is off by default, it is set one module at a time, and there is no theme wide switch. You decide where it helps and leave the rest still.

Turn it on¶

Open the module and go to the Style tab.
Near the bottom, tick Add animation to module.
An Animation settings group appears. Pick an effect and, if you like, change the timing.
Save, then scroll the page preview or the live page to see it play.

Nothing is loaded for a module that has the box unticked, so modules without animation cost nothing.

What you can set¶

The names change a little from module to module (a card, a plan, a step, a column), but the settings are the same everywhere.

Setting	What it does
Effect (Card effect, Item effect, Text effect and so on)	How the card, row or text arrives. See the lists below.
Content effect	How the parts inside a card (icon, title, text, button) arrive one by one. None leaves them still.
Media effect	How a picture or media column beside the text arrives.
Delay between cards (or items, columns, parts)	Seconds between one card and the next when several arrive together.
Delay between inner elements	Seconds between the parts inside a card. Shown when a content effect is chosen.
Duration	Seconds each part takes to appear. Short and calm feels best, around 0.6 to 1.
Distance	How far a part travels while it arrives. Hidden for effects that do not travel.
Motion feel	The curve of the movement. See below.
Play only once	On: plays the first time it is seen. Off: plays again each time it scrolls back into view.
Play again when the slide changes	Sliders only. Each new slide plays its text as it comes in.

Settings only some modules have¶

Setting	Where	What it does
Play text parts (One by one or All together)	Banners, Section Title, Call to Action, Quote	One by one shows the tag, title, text and buttons in turn. All together shows them at once.
Photo effect and Card effect	Quote	The photo beside the quote, and the card box around it. The card effect is offered when Card UI is on.
Animation level (Logo level or Logo block level)	Logo Grid	Logo level animates each logo in turn. Logo block level animates the whole group of logos as one block.
Rail effect	Table of Contents	How the list of links appears: None, Fade in, Slide in from its side, or Items one by one.
Bullet effect	Custom Bullet Points	How the bullets inside each block appear, one by one.
Counter effect	Counter	How each counter card appears. The number count up is a separate setting on the Content tab and still works the same way.
Card effect (filter and cards)	Portfolio	The filter buttons and each card use it. A card that a filter or Load more brings in plays too. The Load more button is included.

The effects¶

For cards, items, rows and columns¶

Effect	What visitors see
Fade up	Fades in while rising from below. The safe default.
Fade in	Fades in without moving. The calmest choice.
Zoom in	Grows slightly from a smaller size while fading in.
Blur reveal	Sharpens from a soft blur while rising a little.
Slide in from the left	Comes in from the left.
Slide in from the right	Comes in from the right.

For the parts inside a card¶

The same six, plus None. The parts travel half as far as the card, so the motion stays gentle.

For titles in banners and text blocks¶

The six above plus Title words: the title moves in word by word and the other parts fade up after it. A highlighted word in the title keeps its style.

Title words needs a title

If the title is hidden or empty, the other parts simply fade up. Nothing breaks.

Highlighted words

A highlighted word with a plain colour, a different font or a size change moves in word by word with the rest of the title. A highlight with a gradient or an underline cannot be split without breaking its look, so that part fades in as one piece instead.

For a media column¶

None, Fade in, Zoom in, Slide in from the left and Slide in from the right. Older pages that used Slide in keep working and still come from the right.

Motion feel¶

Choice	Feels like
Smooth	Calm and even. Good everywhere.
Soft	Gentle, with a slow finish.
Snappy	Starts fast, settles quickly.
Bounce	Overshoots slightly, then settles. Use sparingly.

Sliders¶

Sliders come in two kinds, and they animate differently.

Banner sliders (Single Column Banner - Slider, Multi Column Banner - Slider) animate only the text of each slide. The slider keeps sliding as usual.

The first slide plays when the slider scrolls into view.
With Play again when the slide changes on, every new slide plays its text as it arrives. The text of the other slides waits hidden, so you never see it before it moves.

Card and logo sliders (Content Card, Image Box, Logo Slider, Testimonial Slider) appear as one block when they scroll into view, then slide as usual. Their cards are not hidden one by one, which would show gaps at the edge of the slider.

On every slider, Zoom in moves the slider up a little instead of scaling it. Scaling would change the slider's width and break the layout.

Which modules have it¶

Banners and heroes: Single Column Banner (Simple and Slider), Multi Column Banner (Simple and Slider), Banner with Form.
Content and layout: Content, Content Card, Content and Media, Image Box, Section Title, Accordion, Tab, Timeline, Steps, Features, Custom Bullet Points, Table of Contents.
Social proof: Testimonial Grid, Testimonial Slider, Quote, Logo Grid, Logo Slider, Counter, Portfolio.
Conversion: Call to Action, Buttons, Form, Contact Card, Pricing.
People and careers: Team, Job Listing.
Blog: Blog Listing, Blog Section, Blog Post - Recent Post, Blog Comments.
Media: Video Embed.

Navigation, footers and the Header and footer settings do not have animation. Neither do the four Blog layout modules (Classic, Cover, Sidebar and Split) or the blog post pages they style, because long reading text is better left still.

What it costs¶

The animation script loads only on a page that has at least one module with the box ticked. It is about 34 KB over the wire once compressed (the animation library and our own code), and visitors keep it cached after the first page. A page with no animated module loads none of it.

Small hover effects, like a button changing colour or a card image zooming a little, are not part of this group. They stay as they are and work with or without animation.

Good habits¶

Leave the first section still

If a module is the first thing visitors see, we recommend leaving animation off. Adding it there can slow the first paint, and in our tests an animation on the first section lowered the mobile PageSpeed score. Use it lower on the page instead.

Animate a few modules, not all. When everything moves, nothing stands out.
Pick one style for the page. Fade up on every card looks tidy. Mixing five effects looks busy.
Keep it short. A duration of 0.6 to 1 second and a distance of 30 to 50 pixels feels natural. Long, far travel feels slow.
Test on your phone. Zoom in and Blur reveal on very large cards can be heavier to draw on older phones.
Reduced motion is respected. Visitors who have asked their device for less motion see the page with no animation at all.
Content never gets stuck hidden. If the animation script cannot load, the content shows by itself after about two and a half seconds.

If something does not move¶

What you see	What to check
Nothing moves	Is Add animation to module ticked? Test on the page preview or live page, and make sure your device is not set to reduce motion.
No Distance field	The chosen effect does not travel (Fade in and Zoom in). Pick Fade up, Blur reveal or a slide.
No Delay between inner elements	Set a Content effect other than None first.
Title words does nothing	The module's title is hidden or empty. Show the title, or pick another effect.
A slider's text does not replay	Tick Play again when the slide changes.
The text is hidden for a moment when the page loads	Expected. The parts wait hidden until the animation starts. If the animation script cannot load, they appear by themselves after about two and a half seconds. Leave animation off on the first section to avoid the wait.
The animation feels too fast or slow	Change Duration. Try 0.8 seconds and Smooth first.

See also Why a field sometimes does nothing. If you customize the theme or add animation to a new module, read Animation for developers.