Add Animations to Components

Animations help you draw visitor's eyes to certain areas of your website. You can have a quote form fade into view or a list of services slide in from the side of the screen!

Properly used, animations can create a more interactive experience for visitors and draw their attention. However, less is more.

Including too many animations on a page can be distracting or even dizzying for website visitors. We recommend including some animations on your website, but be careful to not overdo it.

Add Animations to Components

To add animations to components, start by navigating to the Website Builder of the page that includes your component.

Find the component you'd like to add an animation to, then click on it to load the component settings.

Click the Animation tab

Next , choose between animating the Entire Component or Individual Elements of a component.

Entire Component: Add an animation to the entire component. For example, a form and the title/text above it.

Individual Elements: Add an animation to a single element of a component. For example, add an animation to only a form and not the title above it.

If individual elements can be animated, they will be listed within the Individual Elements tab.

Next, choose which type of animation you'd like to add to your component.

Scroll down for a list of different animation types

Once you're happy with your component animations, you can publish your site!

Different Types of Animations

Below are the different types of animations available to you to choose from. Feel free to test out different animations to find the one you prefer!

None

No animation will be applied to the element. Click this button if you'd like to remove an existing animation.

Bounce

Your element will "bounce into place" from offscreen. You can choose the direction that the element will bounce in from.

Fade

Your element will gradually fade into view. Choose to have the element stay in the same place ("Fade in"), or simultaneously fade into view while sliding in from offscreen.

Slide

Your element will slide into place from offscreen. This is similar to the Fade animation, but does not include any fade.

Zoom

The element will quickly "zoom" into view from the center of the page. You can choose if you'd like the animation to move slightly up, down, to the left, or right.