Animations allows blocks to fade in smoothly when they appear on screen. A user might have global animations on, or toggle it per block.
Setup
Add the animation library declaration to your block:
<animation library="aos" version="3" />
> Note: This is currently the only supported library and version. We might introduce other animations in the future with other libraries or versions.
Usage 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>
Key Points
Only apply
sf-animateto HTML tags, not Snowfire tags like<sf-text>Multiple
sf-animateinstances are permittedsf-animate-delayparameter accepts millisecond values for timing controlAnimations re-trigger each viewport appearance
AOS Initialization
The animations use the AOS (Animate On Scroll) library with these default settings:
AOS.init({
easing: 'ease-out-quart',
duration: 800
});