Effects

The Effects extension lets you add simple entrance or scroll‑based animations to your blocks.

Examples of what you can do:

• Make a heading fade in as you scroll.
• Slide a section in from the side.
• Add a gentle animation to key call‑to‑action areas so they stand out.

This is all done with visual controls—no code required.

Where to find it

1. Select a block you want to animate (for example, a Group, column, or hero section).
2. In the right sidebar, go to Styles.
3. Look for the Effects panel.
4. Expand it to see the animation options.

If you do not see the Effects panel, it may have been turned off in the Blocklayouts Preferences screen.

Adding an animation

1. Select your block
   • Click on the block you want to animate (for example a Group that wraps a heading and text).
2. Open the Effects panel
   • In the right sidebar, open Styles → Effects.
3. Enable animation
   • Turn on the main animation toggle or option.
4. Choose an animation style
   • Pick from the available presets (for example, fade, slide, zoom—names depend on your version).
   • Try a few and see what feels best for your design.
5. Fine‑tune the timing (optional)
   • Duration: how long the animation lasts.
     • Short durations feel snappy (e.g. 0.3–0.6 seconds).
     • Longer durations feel more dramatic.
   • Delay: how long to wait before the animation starts.
     • Use a slight delay to stagger multiple blocks on the page.
6. Set when it should run
   • Many setups allow you to choose when the block animates:
     • For example, when it scrolls into view.
7. Save and test
   • Click Update or Save.
   • View the page on the front end and scroll to see the animation.

Ideas for using Effects

• Hero section fade‑in
  • Animate the main hero text so it gently fades in as the page loads.
• Features row
  • Animate each feature column with a small delay between them:
    • Column 1: delay 0s
    • Column 2: delay 0.1s
    • Column 3: delay 0.2s
  • This creates a staggered appearance that still feels smooth.
• Call‑to‑action emphasis
  • Add a soft animation to the main CTA section near the bottom of the page so it draws attention when users reach it.

Best practices

• Less is more:
  • Only animate important sections (hero, key features, CTAs).
  • Avoid animating every single block—this can feel distracting.
• Keep animations quick:
  • Short animations feel modern and keep the site feeling fast.
• Think accessibility:
  • Avoid fast or overly dramatic animations that might be uncomfortable for some visitors.

Troubleshooting

• The animation doesn’t play
  • Make sure you’re viewing the live front end of the site, not just the editor.
  • Scroll so the block comes into view; many animations only trigger when the block appears on screen.
  • Check that Effects are enabled in the Blocklayouts Preferences.
• Animations feel choppy
  • Reduce the number of animated blocks on the page.
  • Use simpler presets and shorter durations.