How to Use Animations in Your Website

Animations can add visual interest e engagement to your website by making elements appear dynamically or respond to user interactions. The website builder includes two types of animations: Animações de entrada e Scroll Effects.

1. Adding Entrance Animations

Entrance animations allow elements to appear with an effect when they load on the page.

How to Apply an Entrance Animation

1. Selecione o element or column you want to animate.
2. Open the Configurações and go to Effects in the right sidebar.
3. Selecione o Entrance tab.
4. Choose an animation type, such as:

• Quicar
• Fade
• Ampliar

1. Adjust additional settings:

• Direction – Choose from left, right, up, or down.
• Duração – Control how long the animation lasts.
• Atraso – Set when the animation should start (immediately or after a short delay).

Previewing the Animation

• Clique Replay Animation to see how it will look.
• If you want the animation to repeat continuously, enable Infinite Animation.

Making Animations Responsive

• Some animations may not work well on mobile devices.
• In Tablet or Mobile View, you can disable entrance animations for a smoother experience.

2. Adding Scroll Effects

Unlike entrance animations, scroll effects trigger as users scroll down the page, making elements move dynamically.

How to Apply a Scroll Effect

1. Select an element or column.
2. Open Settings > Effects and select Scroll.
3. Choose an effect such as Rotate, Scale, ou Fade.
4. Scroll up and down to see the effect in action.

Customizing Scroll Effects

• Click the effect icon to access settings.
• Adjust the rotation direction (left or right).
• Set the pivot point (center, top-left, bottom-right, etc.).

Using Scroll Effects Wisely

• Best for desktop: Works well on design elements, icons, and images.
• Not ideal for mobile: Can be distracting when scrolling with fingers.
• To disable on mobile, go to Tablet/Mobile View and turn off the effect.

3. Combining Multiple Animations

For more dynamic effects, you can apply both entrance animations e scroll effects to the same element. However, use them sparingly to avoid overwhelming the user experience.

By using entrance animations and scroll effects strategically, you can create a visually appealing and interactive website that enhances user engagement.