Animations

Animations allows blocks to fade in smoothly when they appear on screen. A user might have global animations on, or toggle it per block.

To add animations to a custom block, add the following code to your block properties.

<animation library="aos" version="3" />

👉 This is currently the only supported library and version. We might introduce other animations in the future with other libraries or versions.

Now you need to choose what to animate in your blocks. This is done by adding the sf-animate attribute to an HTML tag. Here is a full fledged example:

<div class="text-columns-column" sf-animate>
    <div>Column 1</div>
</div>

<div class="text-columns-column" sf-animate sf-animate-delay="200">
    <div>Column 2</div>
</div>

<div class="text-columns-column" sf-animate sf-animate-delay="400">
    <div>Column 3</div>
</div>

A couple of things to remember:

  • Only add sf-animate to HTML tags. Don't add them to Snowfire tags such as <sf-text>
  • You are free to add as many sf-animate instances as you wish
  • You might add sf-animate-delay if you wish to delay the animation. The value is specified in ms.
  • Animations will run each time the block appears in the viewport.