Using animations on your Website Builder site

Want to give your website content a visual boost? Try adding animations to your site!

With animations, you can bring your Website Builder site to life with engaging visual effects. Simply open a component’s settings, select an animation effect, and preview it instantly. Each component can have its own animation, which you can customise to match your style - giving you endless ways to add a personal touch and make your website truly stand out.

• Why should I use animations on my website?
• Adding animations to your Website Builder components

Why should I use animations on my website?

Animations can be used in various ways and for many purposes. You can use them to draw attention to specific items or encourage interaction with elements (such as buttons or social media links). You can also use them creatively to make your website content more vivid and lively. No matter the approach, animations are a powerful way to create a personal and professional-looking website.

Want to see some of the effects in action? Take a look at the GIF below. On this site, we've added different effects to texts, buttons, and containers.

Adding animations to your Website Builder components

You can add animations to the following Website Builder components:

• Text
• Images
• Boxes and Containers
• Buttons
• Icons
• Social icons
• Logos

You can access the animation settings by clicking on the Edit tab that appears at the top or bottom of a component when you click on it. 

Here is an example where we're adding animation effects to a piece of text:

1. Select the component and click Edit text at the top or bottom of it.
2. Click Animation in the floating menu.
3. Slide the Add animations toggle to ON.
4. Under Animation effect, you can select an effect from the drop-down menu. Choose between Fade in, Slide in or Bounce.
5. If you select Fade in or Slide in, you also get the option to choose an Animation direction. This is the direction from which the animation will enter the screen. From the drop-down menu, you can choose between centre, top, bottom, left, or right.
6. You can choose the speed of the animation. It can be fast (300 ms), medium (600 ms), or slow (1000 ms).
7. Choose whether there should be a delay, and if so, how long the chosen delay should be.
8. Save your changes and check the animation in the Preview. It will not play in the editor.
9. Repeat the above process with other components where you want to add animations.

Note: An animation will only play out once per page load. This also means it will not be shown again if a website visitor scrolls back on a page.

Related articles:

• How can I add parallax scrolling to my Website Builder site?
• How to use the Gallery and Image slider components in Website Builder