In this tutorial, you will learn how to apply animations to buttons in the Builderall Website Builder. Animations can help highlight important actions on your page, making buttons appear at the right moment for visitors.
Animations can be triggered in two main ways:
• After a specific amount of time
• When the element becomes visible on the screen while the visitor scrolls
These effects can help improve engagement and draw attention to important calls-to-action.
You can watch the full tutorial video below:
How to Add an Animation to a Button
Follow the steps below to apply an animation to a button element.
- Open your page inside the Builderall Website Builder.
- Locate the button you want to animate.
- Right-click the button.
- In the settings panel, scroll down until you find the Animation option.
- Select the animation trigger you want to use.
Animation Trigger: Time Delay
This option makes the button appear after a specific number of seconds.
Steps
- Right-click the button.
- Open the Animation settings.
- Select Time Delay.
- Enter the number of seconds you want the system to wait before displaying the button.
Example:
If you set 3 seconds, the button will appear three seconds after the page loads.
This method is commonly used to display offers or calls-to-action after the visitor has started reading the page.
Choosing the Animation Effect
After selecting the trigger, you can choose the animation style.
If your goal is for the element to appear on the screen, choose an animation that contains “In” in its name.
Examples include:
• Fade In
• Bounce In
• Slide In
These effects make the element smoothly appear on the page.
After selecting the effect:
- Click Save.
- Preview or publish the page to test the animation.
Important
Animations do not appear inside the page editor.
To see them working, you must:
• Open the published page, or
• Use the preview mode.
Animation Trigger: When Element Becomes Visible
Another option is to display the button only when the visitor scrolls to the section where it is located.
This creates a dynamic experience where elements appear as the visitor moves through the page.
Steps
- Right-click the button.
- Open the Animation settings.
- Select When Visible.
- Choose the animation style.
- Save the configuration.
How the “When Visible” Animation Works
With this option enabled:
• The button will not appear immediately when the page loads.
• It will only appear once the visitor scrolls to that section.
This is often used for:
• Purchase buttons
• Signup forms
• Strategic calls-to-action further down the page
Important Limitation
Each element can have only one animation applied.
It is not possible to stack or overwrite multiple animations on the same element.
If you need different animation effects, you must apply them to different elements on the page.
Testing the Animation
After saving the configuration:
- Publish your page.
- Open it in your browser.
- Refresh the page.
Depending on your settings:
• The button will appear after the selected delay
or
• It will appear when the visitor scrolls to that section.
FAQ
Can animations be applied to elements other than buttons?
Yes. Animations can be applied to other elements within the builder.
Why don’t I see the animation inside the editor?
This is expected behavior. Animations only appear in:
• The page preview
• The published page
Can I add multiple animations to the same element?
No. Each element supports only one animation.
If you want different effects, apply them to separate elements.
Troubleshooting
The animation does not appear
Check the following:
• The animation was saved correctly
• The page has been published
• The delay time is not too long
The element appears immediately
Verify whether the animation trigger is set to:
• Time Delay, or
• When Visible
If neither is selected, the element may appear instantly.
The animation does not show inside the builder
This is normal.
Animations can only be viewed in:
• Preview mode
• The live published page