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?
• Key Benefits of Animation Customizations
• How to Set Up Animation Customizations
• Frequently Asked Questions

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.

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 HighLevel 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.