Block Animations

Start here: watch the walkthrough video (5 minutes)

When to use block animations

These animations can add polish and visual interest when used intentionally. Block Animations work best when:

• Highlighting key sections of a page
• Adding subtle motion to major content areas
• Introducing content progressively as users scroll

Avoid applying animations to every block on a page. Instead, consider animating larger sections rather than individual elements within a section. Too much motion can feel distracting and overwhelming.

---

Where to find block animations

Most blocks include a Block Animations section in the block settings sidebar.

To access:

1. Select a block
2. Open the Block settings panel in the right sidebar
3. Toggle open the Block Animations section

Some blocks may not support Block Animations. This is typically the case for:

• Blocks that already include built-in animation (such as Logo Marquee)
• Inner component blocks that are part of larger interactive blocks

---

How to enable an animation

1. Select the block
2. Open the Block Animations panel in the sidebar
3. Choose an Animation Type (currently, Fade In is the only available option)
4. Select an Animation Direction (such as Top, Bottom, Top Left, Bottom Right)

The block will now animate as it enters the viewport.

---

Advanced animation controls

Click Show Advanced Controls to reveal additional options.

Animation Duration

Controls how long the animation takes, in milliseconds. Shorter durations feel quicker and more energetic. Longer durations feel softer and more gradual.

Animation Delay

Controls how long the animation waits before starting, in milliseconds. Delays can help stagger animations across multiple elements.

Disable animation delay on mobile

If an animation is intentionally delayed on desktop, enabling this setting removes the delay on mobile. This can help mobile experiences feel faster and more responsive.

Animation Easing

Easing controls how the animation moves — how it accelerates and decelerates.

Different easing options create different motion “feel”:

• Sine — softer, smoother movement
• Quad — stronger, more energetic movement
• Ease In — starts slowly
• Ease Out — ends slowly
• Ease In Out — slow at both the beginning and end

Choose easing that matches the tone of the page. Subtle transitions are usually preferred.

Trigger every time the element enters the viewport

By default, animations trigger only once. When enabled, the animation will trigger each time the block scrolls into view. Use this setting carefully. Repeated motion can become distracting.

Animation trigger position

Determines how much of the block must be visible in the viewport before the animation starts. Adjusting this allows you to fine-tune when motion begins.

---

Accessibility and motion preferences

Block Animations automatically respect a user’s operating system or browser setting for “Prefer Reduced Motion.” If a user has this setting enabled, animations will not display. This ensures the experience remains accessible and comfortable for users sensitive to motion.

---

Tips for editors

Use animation intentionally

Motion should support content — not compete with it.

Animate sections, not everything

Applying animation to larger sections is often more effective than animating every individual block.

Keep timing subtle

Avoid extremely long delays or dramatic movement. Subtle motion feels more polished.

Always preview

Test animations on both desktop and mobile to confirm they feel smooth and not distracting.