Websites · 2 min read
Entrance Animations for Sections, Rows, and Columns
Entrance animations make sections, rows, and columns animate into view as visitors scroll down the page. Each block plays its animation when it scrolls onto the screen, then stays visible. Content waiting its turn shows normally instead of being hidden, so the page is always readable.
Animation types
| Category | Options | | --- | --- | | 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 | In | | Zoom | In | | Light Speed | Left, Right | | Infinite Loop | Glow, Rocking, Bounce |
Infinite Loop animations keep repeating after the block scrolls into view.
Animation settings
| Setting | Range | What it does | | --- | --- | --- | | Duration | 0.1 to 3 seconds | How long the animation takes. | | Delay | 0 to 5 seconds | How long to wait after the block scrolls into view. | | Scale | 0.5x to 2x | How far or how strongly the block moves. | | Easing | Linear, Ease-in, Ease-out, Ease-in-out | How the animation speeds up and slows down. |
Adjust duration and easing together to match the feel of your page.
Automatic sequencing
You don't need to work out delays yourself. Animations play in order of the page structure:
- The section animates first.
- Rows inside it animate next.
- Then the columns inside each row.
- Then the elements inside each column.
When you add, remove, or move blocks, the order updates automatically. Pages you already published use this sequencing too.
Mobile
Entrance animations are off on mobile by default. Each section, row, and column has an Enable animations on mobile toggle. Turning it on can slow page loading and scrolling on older phones, so use it sparingly.
Add an entrance animation
- Click the section, row, or column you want to animate.
- In the right sidebar, open the Animations tab.
- Under Entrance Animation, hover over an animation to preview it on the canvas.
- Click the one you want.
- Set Duration, Delay, Scale, and Easing.
- Optional: turn on Enable animations on mobile.
- Save and publish the page.
Tips
- Use one or two animation styles per page. Too many can feel busy.
- Keep durations short, under a second, for most content so visitors aren't kept waiting.