Add animations to your content to enhance your UI, usability, appearance, and to convey important information to your users.
To get the most out of this document, you should be familiar with the basics of using Builder. For more detail, visit Getting Around Builder: the Visual Editor.
You can animate any block, or element, in the Builder Visual Editor. While you can use the UI for endless no-code animation possibilities, you can also provide your own code to animate elements.
To animate a block:
- Select the block.
- In the Animate tab, click the + Animation button.
- Select a Trigger. A Trigger is the action that causes the animation to start. The Trigger you choose displays contextual options. Refer to the next section for details.
- Select an Animation.
- Specify the Duration.
- To edit Easing, the Delay, and Threshold, click the three dots to the left of the Preview button.
Builder signifies that a block has animations with an icon on that layer in the Layers tab.
The video below shows where to find animation settings in the Animate tab.
The Animate tab offers three triggers, Scroll in view, Page load, and Hover. A trigger is an action that causes the animation to begin. Depending upon the trigger you choose, the options vary.
When the block scrolls into the viewport, the animation starts.
To trigger the example animations below, scroll so that the boxes come into the viewport. You might have to scroll away and scroll back to them.
| Trigger | Animation | Example |
|---|---|---|
Scroll in view | Fade in | |
Scroll in view | Fade in up | |
Scroll in view | Fade in down | |
Scroll in view | Fade in left | |
Scroll in view | Fade in right |
When the page loads, the animation starts.
To trigger the example animations below, reload the page.
| Trigger | Animation | Example |
|---|---|---|
Page load | Fade in | |
Page load | Fade in up | |
Page load | Fade in down | |
Page load | Fade in left | |
Page load | Fade in right |
When the pointer hovers over the boxes, the animation starts as in the examples below.
To trigger these animations, hover over each box.
Tip: When you select Hover as the Trigger, you must provide a custom animation. You can provide code or edit the style options to specify which properties change.
The animations below are only a small selection of examples.
| Trigger | Properties Edited for Custom Animation | Example |
|---|---|---|
Hover | Background color | |
Hover | Opacity 0, border | |
Hover | Width, background color, background image | |
Hover | Rotate z 45 degrees |
The Animate tab offers a number of animations.
- Custom: you specify the animation exactly. The next section covers custom animations.
- Fade in: Gradually increases the opacity of an element from transparent to fully visible.
- Fade in up: Combines a fade-in effect with upward motion; the element becomes more visible as it moves up.
- Fade in down: Merges a fade-in effect with downward motion; the element becomes more visible as it moves down.
- Fade in left: Blends a fade-in effect with leftward motion; the element becomes more visible as it moves from right to left.
- Fade in right: Integrates a fade-in effect with rightward motion; the element becomes more visible as it moves from left to right.
The video below shows opening the Animation tab and scrolling through the available animations:
You can customize animations for any of the triggers; however, Hover is unique because when you use a Hover trigger, you must provide a custom animation.
To apply a custom animation:
- Select the block you want to animate.
- Go to the Animate tab.
- Click + Animation.
- Select a Trigger.
- For Animation, select Custom.
- In the Steps section for Hover state, click Edit. The panel that displays is the same as the Style tab, except that the styles you specify here are only for the hover state of the selected block.
- Set your styles and hover your mouse over the block to preview.
The video below shows how to apply a custom animation and uses the Hover trigger, but you can use Scroll in view and Page load in the same way. Though this example uses background color and width, you can edit any of the block's styles.
Learn more about interactivity in State and Actions.