In this short tutorial I am going to show you how you can easily add some pop-in animations to your Highlevel website or funnel. This is a really easy process and even thought it requires some custom code, all you need to do is copy and paste. I am going to make this an easy process for anyone to follow along :)

There is no coding experience required to add these animations:

TL;DR: Overview of Pop-In Animations for Highlevel

This tutorial goes more in depth on some details, but if you feel comfortable with GHL and custom code this is a quick summary of what we are going to accomplish today:

1. CSS Setup: Paste provided CSS in Custom CSS tab for pop-in styles (.popIn to .popIn5 with increasing delays).

2. JavaScript Trigger: Add provided JavaScript in Footer Tracking for scroll-triggered animations.

3. Class Assignment: Apply animate-on-scroll and popIn classes to desired elements.

4. Editor Visibility: Temporarily comment out opacity: 0 and transform: scale(0.5) in CSS for visibility during editing.

5. Finalize: Ensure correct class application and preview animations.

Dive into the full guide for code snippets and specific navigation tips.

Having animations on your company website or sales funnel is a great way to add a nice touch of modern design and professionalism to your brand. In a sea of thousands and thousands of competitors having a nice designed site with some simple animations can help build more trust in your users.

The process of adding animations in Highlevel consists of 3 simple steps.

1. Add the CSS for the animations.

2. Incorporate JavaScript to animate on scroll.

3. Assign CSS class names to the elements.

Step 1: Copy & paste the CSS for Pop-In Animations

The first step is to add the code that defines the styles. If you take a quick peak at the code you will see I have 5 classes with the names popIn, popIn2, popIn3, popIn4, popIn5, (please observe the capital I after pop). Each of these classes are set to progressively increase the animation delay.

In your GoHighLevel dashboard, navigate to the 'sites' tab on the left side. After that page loads, you will select Websites or Funnels in the top navigation.

Open the Custom CSS tab: Hint: its the paint brush icon in the top navigation of the website / funnel builder.

Paste these CSS Classes: Copy all the code below and paste it into the tab and click save.

/* Initial State */
.popIn, .popIn2, .popIn3, .popIn4, .popIn5 {
    opacity: 0; /* Start elements as invisible */
    transform: scale(0.5); /* Start elements scaled down */
}

.popIn.in-view, .popIn2.in-view, .popIn3.in-view, .popIn4.in-view, .popIn5.in-view {
    animation-duration: 0.5s;
    animation-name: popIn; 
    animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
    animation-fill-mode: forwards;
}

.popIn.in-view { animation-delay: 0.5s; }
.popIn2.in-view { animation-delay: 0.55s; }
.popIn3.in-view { animation-delay: 0.6s; }
.popIn4.in-view { animation-delay: 0.65s; }
.popIn5.in-view { animation-delay: 0.7s; }

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

Important: The third line down in the code is 'opacity: 0' - this will cause your elements to become invisible until the animation fires - even in the editor. See step 4 to learn how to 'comment' out the code to work with in the editor.

Step 2: Adding JavaScript for Scroll Animations

Now that we have successfully added the code that defines the animation themselves, we are going to add a piece of code that tracks the elements as they scroll into view. The reason we do this is because by default all the animations will fire when the page initially loads. There is no point in having animations fire on a part of the site our user cant see.

Copy & paste the Javascript for animations to trigger by scroll

Open Custom Tracking tab (Footer Tracking): In the Highlevel website/funnel builder, open the Tracking Code tab in the top navigation (marked with a </> icon). Navigate to the Footer Tracking tab and paste the following JavaScript:

Option 2: Create a section with a Custom Code Block, paste this code and save it as a Global Section and add it to the bottom of the page somewhere.

Note: This code only needs to be pasted once. You do not need to paste this if you have already done so from one of my previous GHL animation tutorials.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // Function to check if an element is in view
    function isElementInView(element) {
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).outerHeight();
        var viewportTop = $(window).scrollTop();
        var viewportBottom = viewportTop + $(window).height();
        return elementBottom > viewportTop && elementTop < viewportBottom;
    }

    // Function to apply animation classes on page load
    function checkAnimationOnLoad() {
        $('.animate-on-scroll').each(function() {
            if (isElementInView(this) && !$(this).hasClass('animated')) {
                $(this).addClass('in-view animated');
            }
        });
    }

    // Apply animation classes on page load
    checkAnimationOnLoad();

    // Apply the scroll event listener
    $(window).on('scroll', function() {
        $('.animate-on-scroll').each(function() {
            if (isElementInView(this) && !$(this).hasClass('animated')) {
                $(this).addClass('in-view animated');
            }
        });
    });
});
</script>

So this code simply keeps track of the elements we want to animate as they scroll in view. This code also makes sure the animation only fires one time. We do not want the animations to fire over and over if the user decides to scroll up and down the page.

Step 3: Applying Animations to Elements

The final step is to decide what parts of your website or funnel you want to animate. One thing I love about Highlevel is it gives us the ability to add Custom Classes to sections, rows, columns, or any of their long list of elements.

Depending on your use case, you may want to animation the whole row, or just individual elements. One of the reasons I included 5 classes was to give you the ability to add animate different elements at different times.

Hint: You can find the Custom Classes by navigating to the 'Advanced Tab'

It takes longer to go through and add the classes to every single element, but it does look good when they all appear in slightly different intervals vs all of them at the same time. But again it all comes down to your use case.

Select the element you want to animate: In Highlevel, you can add custom classes to sections, rows, columns, or any element. Feel free to mess around with different options and see what looks best for you :)

Add the 'animate-on-scroll' class: This part is one of the most important steps, as your animations will not fire unless you add the animate-on-scroll class before one of the 5 popIn animations.

Add one of the 5 'popIn' classes: After you add 'animate-on-scroll', add one of the required classes. (popIn, popIn2, popIn3, popIn4, popIn5, (please observe the capital I after pop)

NOTE: Every element you want to animate MUST have the animate-on-scroll class, followed by one of the 5 popIn animation classes.

Save & Preview: Once you’ve added the classes, save your changes and preview the site. With these instructions, you should now see your elements elegantly pop in as you scroll.

Step 4: Why your elements are invisible in the editor

Why Are My Elements Invisible? Upon applying the popIn classes, your elements will start off as invisible. This is intentional to ensure they are not seen before the animation starts. Otherwise it wont give it that nice 'pop' look we are going for.

How to fix it while you are working: While you are still editing your site, you will no doubt find it difficult to work with invisible elements.Simply wrap the code with /* and */.

/* Initial State */
.popIn, .popIn2, .popIn3, .popIn4, .popIn5 {
    /* opacity: 0; */
    /* transform: scale(0.5); */
}

How to change it back before publish: Before you publish and save your site, be sure to remove the /* and */ from the code we just added. We are basically doing what we just did in reverse.

After you remove the comments your first 5 lines of code should look like this:

/* Initial State */
.popIn, .popIn2, .popIn3, .popIn4, .popIn5 {
    opacity: 0;
    transform: scale(0.5);
}

Hopefully that makes sense, I know that it is not ideal and will no doubt be confusing to try and work with invisible elements, but hopefully it makes sense to you as to why these elements need to start with opacity: 0 to give it that nice popping look we are going for.

Conclusion

And there we have it, we have successfully set up our first pop-in animation to our Highlevel websites or funnel. Not only does this simple animation help boost the overall appearance of you site, it also helps contribute to a more interactive and professional user experience.