--- title: Add Animation to Your Website Components description: With BuilderDuck, you can add animations to different components of your website, choosing when and why they start, as well as their duration. --- [Skip to content](https://help.rentlysoft.com/en/add-animation-to-your-website-components#main-content) - [English](https://help.rentlysoft.com/en/add-animation-to-your-website-components) - [Español](https://help.rentlysoft.com/agrega-animación-a-tus-componentes) - [Português - Brasil](https://help.rentlysoft.com/pt-br/agrega-animación-a-tus-componentes) English Show submenu for translations ![rently .jpg\]](https://help.rentlysoft.com/hs-fs/hubfs/rently%20.jpg?height=40&name=rently%20.jpg) Open main navigation Close main navigation - - [English](https://help.rentlysoft.com/en/add-animation-to-your-website-components) - [Español](https://help.rentlysoft.com/agrega-animación-a-tus-componentes) - [Português - Brasil](https://help.rentlysoft.com/pt-br/agrega-animación-a-tus-componentes) English Show submenu for translations - Go to rentlysoft.com Go to rentlysoft.com All the solutions in one click! - There are no suggestions because the search field is empty. 1. [Rently Help Desk](https://help.rentlysoft.com/en?hsLang=en) 2. [BuilderDuck](https://help.rentlysoft.com/en/builderduck?hsLang=en) 3. [Customize your page](https://help.rentlysoft.com/en/builderduck?hsLang=en#customize-your-page) # Add Animation to Your Website Components ## With BuilderDuck, you can add animations to different components of your website, choosing when and why they start, as well as their duration. To add animations to your website, go to **Pages** and select **Page List**. ![](https://help.rentlysoft.com/hs-fs/hubfs/imagen-png-Oct-27-2025-05-38-54-8973-PM-webp-webp.webp?width=1032&height=473&name=imagen-png-Oct-27-2025-05-38-54-8973-PM-webp-webp.webp) Then, choose the page where you want to animate components and click the **edit icon**. ![](https://help.rentlysoft.com/hs-fs/hubfs/imagen-png-Oct-27-2025-05-52-04-6834-PM-webp-webp.webp?width=1032&height=474&name=imagen-png-Oct-27-2025-05-52-04-6834-PM-webp-webp.webp) In your site’s structure, find the component you want to animate and click the **edit icon**. ![](https://help.rentlysoft.com/hs-fs/hubfs/imagen-png-Oct-27-2025-05-52-04-6834-PM-webp-webp-1.webp?width=1032&height=474&name=imagen-png-Oct-27-2025-05-52-04-6834-PM-webp-webp-1.webp) In the sidebar, you’ll find the **Animation** tab. Click it to display the available options. ![](https://help.rentlysoft.com/hs-fs/hubfs/imagen-png-Oct-27-2025-07-00-33-7448-PM-webp.webp?width=1032&height=481&name=imagen-png-Oct-27-2025-07-00-33-7448-PM-webp.webp) In the dropdown menu, you can choose different types of animations (**fade**, **zoom**, or **slide**). ![](https://help.rentlysoft.com/hs-fs/hubfs/imagen-png-Oct-27-2025-07-02-20-3312-PM-webp.webp?width=1032&height=485&name=imagen-png-Oct-27-2025-07-02-20-3312-PM-webp.webp) Below, you can choose whether the animation will start when the component becomes visible (that is, when scrolling down the page) or when hovering over the component (**hover**). ![](https://help.rentlysoft.com/hs-fs/hubfs/imagen-png-Oct-27-2025-07-05-58-0534-PM-webp.webp?width=1032&height=486&name=imagen-png-Oct-27-2025-07-05-58-0534-PM-webp.webp) Next, you can set the **animation duration** (in seconds) and the **delay time** (in seconds). Simply enter the number in the corresponding fields. ![](https://help.rentlysoft.com/hs-fs/hubfs/imagen-png-Oct-27-2025-07-07-41-3532-PM-webp.webp?width=1032&height=482&name=imagen-png-Oct-27-2025-07-07-41-3532-PM-webp.webp) To preview the changes before publishing, click **Preview Changes**. ![](https://help.rentlysoft.com/hs-fs/hubfs/imagen-png-Oct-27-2025-07-08-35-5245-PM-webp.webp?width=1032&height=488&name=imagen-png-Oct-27-2025-07-08-35-5245-PM-webp.webp) Repeat these steps as you need. Once finished, close the sidebar. ![](https://help.rentlysoft.com/hs-fs/hubfs/imagen-png-Oct-27-2025-07-09-15-5953-PM-webp.webp?width=1920&height=904&name=imagen-png-Oct-27-2025-07-09-15-5953-PM-webp.webp) Repeat these steps as many times as needed. To publish your updates, click the **Update** button. - [RentlySoft](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#main-content) - [SYSTEM CONFIGURATION](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#system-configuration) - [USERS](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#users) - [ROLES](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#roles) - [GENERAL CONFIGURATION](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#general-configuration) - [BRANCH OFFICES](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#branch-offices) - [CARS](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#cars) - [BOOKINGS](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#bookings) - [CASH REGISTER](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#cash-register) - [ADDITIONALS](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#additionals) - [RATES](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#rates) - [TEMPLATES](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#templates) - [CUSTOMERS](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#customers) - [MAINTENANCE SERVICES](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#maintenance-services) - [REPORTS](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#reports) - [TAXES](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#taxes) - [FINES](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#fines) - [USE OF THE SOFTWARE](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#use-of-the-software) - [PAYMENTS](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#payments) - [OVERSOLD](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#oversold) - [AUTOMATIC NOTIFICATIONS](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#automatic-notifications) - [INCIDENT MANAGEMENT](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#incident-management) - [SECURITY](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#security) - [AXLE](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#axle) - [Agency Settlement](https://help.rentlysoft.com/en/rentlysoft?hsLang=en#agency-settlement) - [BuilderDuck](https://help.rentlysoft.com/en/builderduck?hsLang=en#main-content) - [First steps](https://help.rentlysoft.com/en/builderduck?hsLang=en#first-steps) - [Set up your company branding](https://help.rentlysoft.com/en/builderduck?hsLang=en#set-up-your-company-branding) - [Customize your page](https://help.rentlysoft.com/en/builderduck?hsLang=en#customize-your-page) - [SEO](https://help.rentlysoft.com/en/builderduck?hsLang=en#seo) - [Booking and Checkout Pages Configuration](https://help.rentlysoft.com/en/builderduck?hsLang=en#booking-and-checkout-pages-configuration) - [Blog](https://help.rentlysoft.com/en/builderduck?hsLang=en#blog) - [Advanced settings](https://help.rentlysoft.com/en/builderduck?hsLang=en#advanced-settings) - [File Manager](https://help.rentlysoft.com/en/builderduck?hsLang=en#file-manager) - [App In & Out](https://help.rentlysoft.com/en/app-in-out?hsLang=en#main-content) - [Configuration](https://help.rentlysoft.com/en/app-in-out?hsLang=en#configuration) - [Integrations - Brokers](https://help.rentlysoft.com/en/integrations-brokers?hsLang=en) - [Web Site](https://help.rentlysoft.com/en/web-site?hsLang=en#main-content) - [PAYMENT SYSTEMS](https://help.rentlysoft.com/en/web-site?hsLang=en#payment-systems) - [promocion](https://help.rentlysoft.com/en/web-site?hsLang=en#promocion) - [Genius](https://help.rentlysoft.com/en/genius?hsLang=en) [![Rently](https://help.rentlysoft.com/hubfs/rently%20logo.svg "Rently")](http://www.rentlysoft.com) Help desk rentlysoft.com Copyright © 2026, Rently Software LLC