Entrance Animations for Sections, Rows and Columns

Entrance animations are no longer restricted to individual elements. You can now apply entrance animations directly to Sections, Rows, and Columns. The builder automatically sequences animations hierarchically as visitors scroll, providing your pages with a polished and deliberate reveal without the need for manual timing calculations.

🚨 The Problem

Previously, animating a page required setting up animations and timing delays manually for every element. Adding, removing, or reordering elements disrupted the entire sequence, necessitating manual recalculations. Furthermore, there was no straightforward method to animate entire layout structures, such as a full section or column container.

🌟 What’s New

1. Layout Block Support: Apply entrance animations directly to Sections, Rows, and Columns.
2. Expanded Animation Library: Includes new and updated categories:

• Fade: In, Up, Down, Left, Right
• Slide: Up, Down, Left, Right
• Bounce: In, Up, Down, Left, Right
• Flip: Flip, Flip In X, Flip In Y
• Rotate & Zoom: Rotate In, Zoom In
• Special Effects: Light Speed (Left, Right), Infinite Loops (Glow, Rocking, Bounce)

3. Custom Entrance Tuning:

• Duration: 0.1s to 3s
• Delay: 0s to 5s
• Scale: 0.5× to 2×
• Easing: Linear, Ease-in, Ease-out, Ease-in-out

4. Live Hover Previews: Hover over any animation option in the sidebar to preview it live on the selected canvas block before committing.
5. Automatic Sequencing: Blocks animate seamlessly in hierarchy (Section → Row → Column → Content). Each element automatically waits for its parent container to finish animating.
6. Mobile Control: Motion is disabled on mobile by default to preserve performance. You can enable it per block via the new “Enable animations on mobile” toggle. Remaining animated blocks will auto-sequence around disabled ones.

⚙️ How to Use It

1. Select any Section, Row, or Column on the builder canvas.
2. Open the Animations tab in the sidebar and select Entrance Animation.
3. Hover over any animation card to preview the effect live on your selected block.
4. Select your desired animation style.
5. Fine-tune settings such as Duration, Delay, Scale, and Easing.
6. (Optional) Toggle “Enable animations on mobile” if you want the effect to play on mobile devices.

🎯 Impact

1. Zero Math Required: Automatic sequencing eliminates the need for manual delay calculations and custom CSS.
2. Layout Resilient: Reordering or editing blocks automatically updates the sequence without disrupting animation timing.
3. Scroll-Triggered: Motion is triggered only when elements scroll into view.
4. Backward Compatible: Existing published pages automatically benefit from the updated sequencing logic without the need for re-saving.

📍 Where to Find It

Go to Page Builder → select a Section, Row, or Column → open the Animations tab in the sidebar.