Give your Fluid Engine sections unique visual flairs with custom movements and effects on blocks.

You can add and customize animations for some blocks. Animations are a great way to draw visitors’ attention to important content and set your brand apart from others.

These block animations are available for some blocks in Fluid Engine sections on version 7.1. You can add other image block animations on any Squarespace site.

Add animations to a block

Block animations are specific to individual blocks and override any site-wide animations you’ve enabled. To add block animations:

1. Open the Pages panel, then click the page with your Fluid Engine section.
2. Click Edit on the page, then click Add Block, and add a block that supports animations.
3. Click the block, then click the pencil icon in the block toolbar. You can also add animations to Stacks.
4. Click Animation, then click +.
5. In the dropdown menu, select a trigger. The trigger will activate the animation for visitors.
6. Select a customizable preset animation option or click Start Blank to create your animation from scratch.
7. Click the back arrow, then click + to add more animations.

Choose a trigger for your block animation

When you add an animation, you’ll first select which action causes the animation to start playing. You can choose from:

• On Hover - Animation plays when a visitor hovers over the block
• On Press - Animation plays when a visitor clicks or taps the block
• Loop - Animation plays continuously
• On Scroll - Animation plays as a visitor scrolls the page
• On Appear - Animation plays when the block appears on the page
• Follow - Animation follows the visitor’s cursor

Customize your block animations

Depending on the trigger, you can customize how the block displays at different points during an animation and the general timing of an animation.

To edit an animation’s custom settings:

• Click Start Blank when adding an animation.
• Click a preset, then click the Edit icon in the top-right corner.
• Click any custom animation you’ve added in the block’s Animation tab.

Preview block animations

You can preview individual animations on a block, or preview all animations on the page.

Preview individual block animations

To preview a block animation while editing it, click Preview below its custom settings.

To preview a block animation you’ve already added to the block:

1. While editing the page, click the block, then click the pencil icon.
2. Click Animation.
3. Click the play button beside the animation you want to preview.

Preview all block animations

To preview all block animations on a page with Fluid Engine sections, click the Preview button in the top-right corner of the page. You can use this to preview how any page on your site appears to visitors.

Delete a block animation

To delete an animation:

1. While editing the page, click the block, then click the pencil icon.
2. Click Animation.
3. Hover over the animation you want to delete, then click the trash can icon.