Skip to main content

Block Animate on Scroll

This theme has included Animate on Scroll (AOS) settings to all blocks. This feature adds appear animation to blocks as they enter the viewport when user scrolls down the page. AOS is customizable across almost all blocks, including custom ones, enabling you to add subtle or bold animations that align with your theme's style. This guide will help you make the most of AOS by explaining how to add and configure these animations for each block on your site.

Settings

  • Animation: Select an animation style to apply to your block.
  • Duration: Set how long the animation should last
  • Delay: Choose how long to wait before the animation starts
  • Offset: Adjust how close the block should be to the bottom of the screen before the animation begins
  • Enable Splitting: Available for paragraph and heading blocks only; splits words into characters to create a unique effect (only visible on the live site)

Tutorial

You can attach the animation to relatively all available block like these below tutorials.

How to add AOS to Multiline Heading

To create a multiline heading please read this tutorial

We will add animation to each paragraph on this multiline heading

Add Splitting Animation to Section Title