How to Add Block Animations in Squarespace (No Code Required)

Squarespace quietly dropped a genuinely useful update in April 2026. You can now add subtle, purposeful motion to individual blocks on your site without writing a single line of code.

If you’ve wanted a testimonial to fade in as someone scrolls, a service card to lift gently on hover, or a call-to-action button to draw the eye without shouting, the new Block Animations feature handles it natively in Fluid Engine sections.

It’s one of those small upgrades that makes a site feel more polished and alive - without the usual trade-offs in speed or complexity.

Why this matters for your business

Most visitors decide in seconds whether your site feels professional and trustworthy. Thoughtful animation helps guide their attention to the right places: your services, testimonials, or booking button. Done well, it improves engagement and makes your site feel modern and well cared for.

The best part? You no longer need a developer (or a plugin) for most common animation needs. That saves time and budget on straightforward projects while still letting you create a site that feels custom and considered.

Which blocks support animations right now

As of June 2026, you can animate these blocks in Fluid Engine sections on 7.1 sites:

  • Image blocks

  • Text blocks

  • Button blocks

  • Shape blocks

  • Form blocks

(Other blocks may gain support over time - Squarespace has been steadily expanding this toolkit.)

You still have the older site-wide animation settings and the classic image block effects available too. Block Animations simply give you much more precise, per-block control.

How to add Block Animations (step by step)

  1. Open the page in edit mode and make sure you’re using a Fluid Engine section (most new sections are).

  2. Add or click the block you want to animate (Image, Text, Button, Shape, or Form).

  3. Click the pencil/edit icon in the block’s toolbar.

  4. In the settings panel that opens, look for the Animations tab or section.

  5. Choose your trigger:

    • On Scroll - most popular for entrance effects

    • On Appear - plays once when the block enters the viewport

    • On Hover - great for interactive cards and buttons

    • Loop - continuous subtle motion

    • On Press or Follow - for specific interactive moments

  6. Pick a preset or click into Custom to adjust distance, rotation, opacity, speed, and timing.

  7. Preview on both desktop and mobile (animations can feel different on smaller screens).

  8. Save and publish.

That’s it. No code, no extra plugins for basic needs.

Best practices for results that actually help your site

  • Less is more. One or two well-placed animations per section usually feel more premium than constant motion.

  • Use animation to guide attention, not decorate. A subtle entrance on a testimonial or a gentle lift on a pricing card works better than animating everything.

  • Always test on mobile. Some scroll-triggered effects can feel janky on touch devices.

  • Respect accessibility. Many visitors prefer reduced motion. If you use Loop or strong effects, consider offering a way to tone them down.

  • Combine with the new Block Transformations (opacity, skew, rotate, etc.) for even more control without code.

When native tools are great - and when custom still wins

For most business websites, the new native Block Animations are more than enough. They deliver clean, professional results quickly and keep your site easy to maintain.

You’ll still want to bring in custom work or a plugin when you need:

  • Animations on blocks that don’t support the feature yet

  • Complex staggered timing across multiple blocks or sections

  • A consistent animation “language” that matches your brand exactly across the whole site

  • Performance tuning on image-heavy pages

  • Advanced interactions that go beyond the current presets

That’s exactly where Log Cabin Digital adds the most value. We help you decide what to handle natively, what’s worth a lightweight plugin, and where custom code is the right long-term investment. Then we implement it cleanly and (if you choose) keep it running smoothly through one of our Care Plans.

Ready to make your site feel more alive?

The new Block Animations feature is a meaningful step forward for Squarespace users who want better engagement without complexity. Used with restraint and purpose, it helps visitors connect with what matters on your site.

If you’d like help choosing the right approach for your business - or you’d rather hand the whole thing off and focus on running your company - we’re here.

Book a strategy call to talk through your site and goals, or explore our Care Plans if you want ongoing hands-off support and regular improvements like this one.

Have you already tried the new Block Animations on your site? I’d love to hear what you think in the comments.


Was this post helpful? Consider buying me a coffee to say thanks!

Next
Next

Premium Card Lift + Image Zoom Hover Effects for Squarespace