# Animation Customizations in Funnels & Websites > Learn how to customize animations in GHL Customer Care’s Page Builder, including scale, duration, delay settings, and improved animation delay behavior. - Source: https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/animation-customizations-in-funnels-websites - Section: Sites / Funnels and Websites - Reading time: 5 min - Images: 11, each explained below --- This article explains how to use **Animation Customizations** within Funnels & Websites to enhance your page designs. You’ll learn how to control exactly how elements animate—adjusting properties like scale, duration, delay, and easing—directly from the Page Builder. Whether you’re creating a landing page, funnel, or full website, these tools help you build smooth, eye-catching animations without needing custom code or third-party tools. By the end, you’ll know how to apply, adjust, and preview animations to create a more engaging experience for your visitors. --- **TABLE OF CONTENTS** - [What is Animation Customizations in Funnels & Websites?](#what-is-animation-customizations-in-funnels-and-websites) - [Animation Delay Behavior Enhancement](#animation-delay-behavior-enhancement) - [Key Benefits of Animation Customizations](#key-benefits-of-animation-customizations)[](#how-to-set-up-animation-customizations) - [How to Set Up Animation Customizations](#how-to-set-up-animation-customizations)[](#access-the-funnels-section) - [Frequently Asked Questions](#frequently-asked-questions) - [Related Articles](#related-articles) --- # **What is Animation Customizations in Funnels & Websites?** **Animation Customizations** is a built-in feature in the Page Builder that allows you to control how individual elements animate across your funnels and websites. It provides a dedicated adjustment panel where you can apply and fine-tune animation effects such as scale, duration, delay, and easing—all with real-time preview. The panel organizes these controls into clearly labeled sections, making it easy to adjust how elements enter, exit, or move on the page without leaving the editor or using custom code. You can modify animations with precision: - **Scale**: from 0.5× to 2× for subtle to dramatic effects - **Duration**: from 0.1 to 3 seconds to set pacing - **Delay**: up to 5 seconds for staggered sequences - **Easing**: choose from Linear, Ease-In, Ease-Out, and Ease-In-Out for smooth transitions These settings give you complete control over visual motion, helping you create more personalized, engaging page designs. --- ## **Animation Delay Behavior Enhancement** Animation delays now function more accurately across funnels and websites. Elements remain fully hidden during the configured delay period and only become visible once the animation begins. Previously, certain elements could briefly appear before the delay completed. This behavior has been corrected to ensure smoother, more visually consistent animations—especially when using staggered animation sequences. No additional configuration is required. All existing animation delay settings automatically follow the improved behavior. --- ## **Key Benefits of Animation Customizations** Animation Customizations enhance both your design workflow and the user experience on your pages. Here’s what you can expect: - **Granular control**: Tailor how each animation behaves by adjusting scale, duration, delay, and easing with exact values. - **Real-time preview**: See your adjustments immediately, so you can fine-tune motion without guesswork. - **Organized layout**: All controls are housed in a clean, intuitive panel that streamlines the editing process. - **Professional polish**: By customizing how elements animate, you can guide user attention, reinforce branding, and build more dynamic interactions—without relying on third-party tools. Together, these capabilities give you the tools to craft smooth, high-impact animations directly inside the GHL Customer Care Page Builder. --- ## **How to Set Up Animation Customizations** You can apply and customize animations for any element in just a few steps: ### **Access the Funnels Section** From the left sidebar, click on **Sites**, then select the **Funnels** tab at the top of the screen. This opens the list of all funnel projects available in your account. ![Access the Funnels Section (image 1 of 11)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155049323105/original/xs5jmgCzwkU0PfqKFai0hqVoGTQnVSRJhw.png) **Access the Funnels Section (image 1 of 11)** This screenshot appears in the "Access the Funnels Section" section of "Animation Customizations in Funnels & Websites". The text alongside this image reads: From the left sidebar, click on Sites, then select the Funnels tab at the top of the screen. This opens the list of all funnel projects available in your account. Immediately after, the guide continues: Use the Search for Funnels bar to open an existing funnel, or click + New Funnel to create one. This will take you to the Funnel Steps screen where you can manage and edit each step of your funnel. - Where to go: From the left sidebar, click on Sites, then select the Funnels tab at the top of the screen. This opens the list of all funnel projects available in your account. - Controls: Sites, Funnels - Next: Use the Search for Funnels bar to open an existing funnel, or click + New Funnel to create one. This will take you to the Funnel Steps screen where you can manage and edit each step of your funnel. ### **Choose or Create a Funnel** Use the **Search for Funnels** bar to open an existing funnel, or click **\+ New Funnel** to create one. This will take you to the Funnel Steps screen where you can manage and edit each step of your funnel. ![Choose or Create a Funnel (image 2 of 11)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155049323121/original/PAoMHA0TPV6iz9FaSqcPhjYgYozL7h-fxg.png) **Choose or Create a Funnel (image 2 of 11)** This screenshot appears in the "Choose or Create a Funnel" section of "Animation Customizations in Funnels & Websites". The text alongside this image reads: Use the Search for Funnels bar to open an existing funnel, or click + New Funnel to create one. This will take you to the Funnel Steps screen where you can manage and edit each step of your funnel. Immediately after, the guide continues: From the list of funnel steps on the left, choose the page where you want to implement animations. In this case, you can see the steps named as Landing Page, Schedule Page, or Thank You Page. This will load the selected page’s preview and…. - What to click: Use the Search for Funnels bar to open an existing funnel, or click + New Funnel to create one. This will take you to the Funnel Steps screen where you can manage and edit each step of your funnel. - Controls: Search for Funnels, + New Funnel - Next: From the list of funnel steps on the left, choose the page where you want to implement animations. In this case, you can see the steps named as Landing Page, Schedule Page, or Thank You Page. This will load the selected page’s preview and editing options to choose from. ### **Select the Page to Animate** From the list of funnel steps on the left, choose the page where you want to implement animations. In this case, you can see the steps named as Landing Page, Schedule Page, or Thank You Page. This will load the selected page’s preview and editing options to choose from. ![Select the Page to Animate (image 3 of 11)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155049323118/original/nqfcTsNyDygYYVWtVSn-VNR4ishBHMSK7w.png) **Select the Page to Animate (image 3 of 11)** This screenshot appears in the "Select the Page to Animate" section of "Animation Customizations in Funnels & Websites". The text alongside this image reads: From the list of funnel steps on the left, choose the page where you want to implement animations. In this case, you can see the steps named as Landing Page, Schedule Page, or Thank You Page. This will load the selected page’s preview and editing options to choose from. Immediately after, the guide continues: Click the Edit button below the selected page preview, then choose Edit in a New Tab for a full-screen editing experience. This opens the page in the builder where you can apply animation settings. - What to choose: From the list of funnel steps on the left, choose the page where you want to implement animations. In this case, you can see the steps named as Landing Page, Schedule Page, or Thank You Page. This will load the selected page’s preview and editing options to choose from. - Next: Click the Edit button below the selected page preview, then choose Edit in a New Tab for a full-screen editing experience. This opens the page in the builder where you can apply animation settings. ### **Open the Page Editor** Click the **Edit** button below the selected page preview, then choose **Edit in a New Tab** for a full-screen editing experience. This opens the page in the builder where you can apply animation settings. ![Open the Page Editor (image 4 of 11)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155049323124/original/Z59tMaphaV5_qMqTdhR_mCYGEOm2j65eYg.png) **Open the Page Editor (image 4 of 11)** This screenshot appears in the "Open the Page Editor" section of "Animation Customizations in Funnels & Websites". The text alongside this image reads: Click the Edit button below the selected page preview, then choose Edit in a New Tab for a full-screen editing experience. This opens the page in the builder where you can apply animation settings. Immediately after, the guide continues: Click on the specific element you want to animate—such as a button, text block, or image. Once selected, its settings will appear on the right-hand panel of the builder. - What to choose: Click the Edit button below the selected page preview, then choose Edit in a New Tab for a full-screen editing experience. This opens the page in the builder where you can apply animation settings. - Controls: Edit, Edit in a New Tab - Next: Click on the specific element you want to animate—such as a button, text block, or image. Once selected, its settings will appear on the right-hand panel of the builder. ### **Select the Element to Animate** Click on the specific element you want to animate—such as a button, text block, or image. Once selected, its settings will appear on the right-hand panel of the builder. ![Select the Element to Animate (image 5 of 11)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155049323178/original/J4YsuDwm0ttwqYlO_JzGWPBIT026hfpIWg.png) **Select the Element to Animate (image 5 of 11)** This screenshot appears in the "Select the Element to Animate" section of "Animation Customizations in Funnels & Websites". The text alongside this image reads: Click on the specific element you want to animate—such as a button, text block, or image. Once selected, its settings will appear on the right-hand panel of the builder. Immediately after, the guide continues: With the element selected, click on the Animations tab in the right-hand panel. This is where you’ll manage entrance and hover animation effects for the chosen element. - What to click: Click on the specific element you want to animate—such as a button, text block, or image. Once selected, its settings will appear on the right-hand panel of the builder. - Next: With the element selected, click on the Animations tab in the right-hand panel. This is where you’ll manage entrance and hover animation effects for the chosen element. ### **Open Animation Settings** With the element selected, click on the **Animations** tab in the right-hand panel. This is where you’ll manage entrance and hover animation effects for the chosen element. ![Open Animation Settings (image 6 of 11)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155049323194/original/m365_KfbYgAGwnv7bLC1H_ChIKSaLlgOmQ.png) **Open Animation Settings (image 6 of 11)** This screenshot appears in the "Open Animation Settings" section of "Animation Customizations in Funnels & Websites". The text alongside this image reads: With the element selected, click on the Animations tab in the right-hand panel. This is where you’ll manage entrance and hover animation effects for the chosen element. Immediately after, the guide continues: Click on Entrance Animation to begin customizing how the element appears when it loads on the page. This will open a list of animation styles you can apply. - What to click: With the element selected, click on the Animations tab in the right-hand panel. This is where you’ll manage entrance and hover animation effects for the chosen element. - Controls: Animations - Next: Click on Entrance Animation to begin customizing how the element appears when it loads on the page. This will open a list of animation styles you can apply. ### **Select Entrance Animation** Click on **Entrance Animation** to begin customizing how the element appears when it loads on the page. This will open a list of animation styles you can apply. ![Select Entrance Animation (image 7 of 11)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155049323200/original/UFfMvMCct-5kFILTG0CExXF_JOWIDvoatw.png) **Select Entrance Animation (image 7 of 11)** This screenshot appears in the "Select Entrance Animation" section of "Animation Customizations in Funnels & Websites". The text alongside this image reads: Click on Entrance Animation to begin customizing how the element appears when it loads on the page. This will open a list of animation styles you can apply. Immediately after, the guide continues: Browse through the animation options under Fade, Slide, Bounce, and more. Click on any style—like “Fade In” or “Slide Right”—to instantly preview how the element will animate into view. - What to click: Click on Entrance Animation to begin customizing how the element appears when it loads on the page. This will open a list of animation styles you can apply. - Controls: Entrance Animation - Next: Browse through the animation options under Fade, Slide, Bounce, and more. Click on any style—like “Fade In” or “Slide Right”—to instantly preview how the element will animate into view. ### **Choose an Animation Style** Browse through the animation options under **Fade**, **Slide**, **Bounce**, and more. Click on any style—like “Fade In” or “Slide Right”—to instantly preview how the element will animate into view. ![Choose an Animation Style (image 8 of 11)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155049323208/original/o3Kj9vyWNa8rTLJVOPfZAEkPPMUFcvPlmA.gif) **Choose an Animation Style (image 8 of 11)** This animation appears in the "Choose an Animation Style" section of "Animation Customizations in Funnels & Websites". The text alongside this image reads: Browse through the animation options under Fade, Slide, Bounce, and more. Click on any style—like “Fade In” or “Slide Right”—to instantly preview how the element will animate into view. Immediately after, the guide continues: Once you’ve selected an animation style, click the Adjust Animation button at the bottom of the panel. This opens advanced settings where you can fine-tune how the animation behaves. - What to click: Browse through the animation options under Fade, Slide, Bounce, and more. Click on any style—like “Fade In” or “Slide Right”—to instantly preview how the element will animate into view. - Controls: Fade, Slide, Bounce - Next: Once you’ve selected an animation style, click the Adjust Animation button at the bottom of the panel. This opens advanced settings where you can fine-tune how the animation behaves. ### **Click Adjust Animation** Once you’ve selected an animation style, click the **Adjust Animation** button at the bottom of the panel. This opens advanced settings where you can fine-tune how the animation behaves. ![Click Adjust Animation (image 9 of 11)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155049323131/original/i5THqmd4OVce1xPLvf8FlFgY0A-C72Y2jw.png) **Click Adjust Animation (image 9 of 11)** This screenshot appears in the "Click Adjust Animation" section of "Animation Customizations in Funnels & Websites". The text alongside this image reads: Once you’ve selected an animation style, click the Adjust Animation button at the bottom of the panel. This opens advanced settings where you can fine-tune how the animation behaves. Immediately after, the guide continues: Use the controls to adjust the Scale, Duration, Delay, and Easing of the animation. These settings help you control how fast, how smooth, and when the animation plays for the selected element. - What to click: Once you’ve selected an animation style, click the Adjust Animation button at the bottom of the panel. This opens advanced settings where you can fine-tune how the animation behaves. - Controls: Adjust Animation - Next: Use the controls to adjust the Scale, Duration, Delay, and Easing of the animation. These settings help you control how fast, how smooth, and when the animation plays for the selected element. ### **Fine-Tune Animation Behavior** Use the controls to adjust the **Scale**, **Duration**, **Delay**, and **Easing** of the animation. These settings help you control how fast, how smooth, and when the animation plays for the selected element. ![Fine-Tune Animation Behavior (image 10 of 11)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155049323158/original/XGpoRj_rQskoeXczOl9h_GKVZgwTARY7jw.png) **Fine-Tune Animation Behavior (image 10 of 11)** This screenshot appears in the "Fine-Tune Animation Behavior" section of "Animation Customizations in Funnels & Websites". The text alongside this image reads: Use the controls to adjust the Scale, Duration, Delay, and Easing of the animation. These settings help you control how fast, how smooth, and when the animation plays for the selected element. Immediately after, the guide continues: Open the Easing dropdown to control how the animation flows. Choose from options like Linear, Ease In, Ease Out, or Ease In Out to define how the motion accelerates and decelerates for a smoother visual effect. - What this covers: Use the controls to adjust the Scale, Duration, Delay, and Easing of the animation. These settings help you control how fast, how smooth, and when the animation plays for the selected element. - Controls: Scale, Duration, Delay, Easing - Next: Open the Easing dropdown to control how the animation flows. Choose from options like Linear, Ease In, Ease Out, or Ease In Out to define how the motion accelerates and decelerates for a smoother visual effect. ### **Adjust Easing Behavior** Open the **Easing** dropdown to control how the animation flows. Choose from options like **Linear**, **Ease In**, **Ease Out**, or **Ease In Out** to define how the motion accelerates and decelerates for a smoother visual effect. ![Adjust Easing Behavior (image 11 of 11)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155049323169/original/oXuxYONiaHNON0Y7XkYPLSZBj9-UasPCMA.png) **Adjust Easing Behavior (image 11 of 11)** This screenshot appears in the "Adjust Easing Behavior" section of "Animation Customizations in Funnels & Websites". The text alongside this image reads: Open the Easing dropdown to control how the animation flows. Choose from options like Linear, Ease In, Ease Out, or Ease In Out to define how the motion accelerates and decelerates for a smoother visual effect. Immediately after, the guide continues: Q: Do I need any prior experience with animations to use this feature? - Where to go: Open the Easing dropdown to control how the animation flows. Choose from options like Linear, Ease In, Ease Out, or Ease In Out to define how the motion accelerates and decelerates for a smoother visual effect. - Controls: Easing, Linear, Ease In, Ease Out, Ease In Out - Next: Q: Do I need any prior experience with animations to use this feature? --- ## **Frequently Asked Questions** **Q: Do I need any prior experience with animations to use this feature?** A: No experience is required. The interface is designed to be intuitive for all users, with real-time feedback and clearly labeled controls. **Q: What types of animations can I apply?** You can choose from a variety of animation styles and customize them using the available controls for timing, scale, and easing. **Q: Can I preview animations before publishing?** Yes, all animation settings display live in the Page Builder, so you can see the effect immediately. **Q: What does easing do in an animation?** Easing determines how the animation moves—whether it starts slowly, ends slowly, or moves at a constant speed. **Q: Can I combine multiple animations on one element?** Only one animation can be applied per element. However, you can use different animations across multiple elements to create coordinated effects. --- ## **Related Articles** - [Navigation Menus in the GHL Customer Care Funnel Builder](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/navigation-menus-in-the-ghl-customer-care-funnel-builder) - [Scroll to Elements or Sections in Websites or Funnels](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/scroll-to-elements-or-sections-in-websites-or-funnels) - [How to Create Multiple Popups Per Page for Funnels and Websites](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/how-to-create-multiple-popups-per-page-for-funnels-and-websites) --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com