How to Use Animations in Your Website

Animations can add visual interest Và engagement to your website by making elements appear dynamically or respond to user interactions. The website builder includes two types of animations: Hoạt hình nhập cảnh Và 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. Chọn element or column you want to animate.
2. Open the Cài đặt and go to Effects in the right sidebar.
3. Chọn Entrance tab.
4. Choose an animation type, such as:

• Tung lên
• Fade
• Phóng

1. Adjust additional settings:

• Direction – Choose from left, right, up, or down.
• Khoảng thời gian – Control how long the animation lasts.
• Trì hoãn – Set when the animation should start (immediately or after a short delay).

Previewing the Animation

• Nhấp chuột 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, hoặc 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 Và 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.