How to Use Animations in Your Website

Animations can add visual interest and engagement to your website by making elements appear dynamically or respond to user interactions. The website builder includes two types of animations: Entrance Animations and 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. Select the element or column you want to animate.
2. Open the Settings and go to Effects in the right sidebar.
3. Select the Entrance tab.
4. Choose an animation type, such as:

• Bounce
• Fade
• Zoom

1. Adjust additional settings:

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

Previewing the Animation

• Click 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, or 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 and 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.