Learn how to customize animations in GHL Customer Care’s Page Builder, including scale, duration, delay settings, and improved animation delay behavior.
Assistants need to reach this page over the internet. While it is only running on your machine, these two buttons will not be able to load it.
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
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.
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)What this shows From the left sidebar, click on Sites, then select the Funnels tab at the top of the screen.What this showsIllustrates the "Access the Funnels Section" section of "Animation Customizations in Funnels & Websites".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.Image 1 of 11Where to goFrom 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.
Buttons and menus referencedSitesFunnels
Next stepUse 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)What this shows Use the Search for Funnels bar to open an existing funnel, or click + New Funnel to create one.What this showsIllustrates the "Choose or Create a Funnel" section of "Animation Customizations in Funnels & Websites".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….Image 2 of 11What to clickUse 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.
Buttons and menus referencedSearch for Funnels+ New Funnel
Next stepFrom 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)What this shows From the list of funnel steps on the left, choose the page where you want to implement animations.What this showsIllustrates the "Select the Page to Animate" section of "Animation Customizations in Funnels & Websites".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.Image 3 of 11What to chooseFrom 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 stepClick 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)What this shows Click the Edit button below the selected page preview, then choose Edit in a New Tab for a full-screen editing experience.What this showsIllustrates the "Open the Page Editor" section of "Animation Customizations in Funnels & Websites".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.Image 4 of 11What to chooseClick 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.
Buttons and menus referencedEditEdit in a New Tab
Next stepClick 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)What this shows Click on the specific element you want to animate—such as a button, text block, or image.What this showsIllustrates the "Select the Element to Animate" section of "Animation Customizations in Funnels & Websites".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.Image 5 of 11What to clickClick 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 stepWith 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)What this shows With the element selected, click on the Animations tab in the right-hand panel.What this showsIllustrates the "Open Animation Settings" section of "Animation Customizations in Funnels & Websites".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.Image 6 of 11What to clickWith 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.
Buttons and menus referencedAnimations
Next stepClick 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)What this shows Click on Entrance Animation to begin customizing how the element appears when it loads on the page.What this showsIllustrates the "Select Entrance Animation" section of "Animation Customizations in Funnels & Websites".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.Image 7 of 11What to clickClick 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.
Buttons and menus referencedEntrance Animation
Next stepBrowse 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)What this shows Browse through the animation options under Fade, Slide, Bounce, and more.What this showsIllustrates the "Choose an Animation Style" section of "Animation Customizations in Funnels & Websites".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.Image 8 of 11What to clickBrowse 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.
Buttons and menus referencedFadeSlideBounce
Next stepOnce 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)What this shows Once you’ve selected an animation style, click the Adjust Animation button at the bottom of the panel.What this showsIllustrates the "Click Adjust Animation" section of "Animation Customizations in Funnels & Websites".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.Image 9 of 11What to clickOnce 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.
Buttons and menus referencedAdjust Animation
Next stepUse 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)What this shows Use the controls to adjust the Scale, Duration, Delay, and Easing of the animation.What this showsIllustrates the "Fine-Tune Animation Behavior" section of "Animation Customizations in Funnels & Websites".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.Image 10 of 11What this coversUse 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.
Buttons and menus referencedScaleDurationDelayEasing
Next stepOpen 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)What this shows Open the Easing dropdown to control how the animation flows.What this showsIllustrates the "Adjust Easing Behavior" section of "Animation Customizations in Funnels & Websites".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?Image 11 of 11Where to goOpen 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.
Buttons and menus referencedEasingLinearEase InEase OutEase In Out
Next stepQ: 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.
