In a world of AI generated content, I am going to do things differently and write this post 100% freehand. I am college dropout with few skills outside of web development, so I apologize for the grammar mistakes.

Now that I got that out of the way, I am going to show you a quick and easy way to add some animations that will help your website stand out amongst your competitors. There are some right and wrong ways to animate a website and today I will show you how to add some really nice and subtle animations to your website just to give it that nicer, more professional look.

There is some custom code required, but all you need to do is copy and paste the code, however I will quickly run through the code and explain what each piece is to help give you and idea of how I do these animations for my own websites in the GHL platform.

There are 3 steps we need to cover:

1. Add the CSS for the animations.

2. Add some JavaScript to animate on scroll.

3. Add the CSS class names to the elements.

   ---

Step 1: Adding CSS for the slide animations

Before we copy over the javascript, we need to the add the code that is going to define what animations we want to use, how long we want to wait before we animate, and what we are going to name it.

Open the Custom CSS tab:

The Custom CSS tab can be found in the website / funnel builder in the top navigation. (Hint: It has a paint brush icon)

Paste these CSS Classes

Simply copy and paste this code in the custom css tab. You will notice that I have two pieces of code slideTop & slideBottom (note the capital T & B after slide, this will be important in step 3).

/* Slide In from Bottom */
.slideBottom.in-view {
    animation: slideBottom 1s ease-in;
    animation-fill-mode: forwards;
}

.slideBottom2.in-view {
    animation: slideBottom 1.25s ease-in;
    animation-fill-mode: forwards;
}

.slideBottom3.in-view {
    animation: slideBottom 1.5s ease-in;
    animation-fill-mode: forwards;
}

.slideBottom4.in-view {
    animation: slideBottom 1.75s ease-in;
    animation-fill-mode: forwards;
}

.slideBottom5.in-view {
    animation: slideBottom 2s ease-in;
    animation-fill-mode: forwards;
}

@keyframes slideBottom {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Slide In from Top */
.slideTop.in-view {
    animation: slideTop 1s ease-out;
    animation-fill-mode: forwards;
}
@keyframes slideTop {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

Step 2: Adding JavaScript for Scroll Animations

Now that we have the styles defined, we need to add some code to help us determine when the element we want to animate is in view. We are doing this because we dont want the animations to trigger right when the page loads. What is the point of the super sleek animations if the user doesnt see them as they scroll down? Hint, there is no point.

Open the Tracking code tab (Footer Tracking)

Open the Highlevel website / funnel builder, and you will see along the top navigation the Tracking Code tab. Hint, its the code Icon </>. By default it opens the Head Tracking. be sure to navigate to the Footer Tracking tab and paste this Javascript code snippet:

NOTE: You do NOT need to paste this code if you have already pasted from one of my previous animation articles.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    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 check and 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>

This code has two scripts, the first is to import jQuery, the second to apply the animation classes. Keep reading to learn more about what the code above is doing.

NOTE: this code can also be pasted inside a code element block if you don't want to paste it in the Footer Tracking.

The Javascript Snippet explained:

The code above is just a quick and easy way to keep track of what elements we want to animate and we want to make sure that it only animates as it scrolls into view. There is another function in there that adds a class after the elements has been animated. I do this because sometimes a user may scroll up and down your page and we want to make sure these animations only happen once and dont overwhelm the user by too many moving pieces.

Step 3: Applying Animations to Elements

Now that we have our styles defined in the CSS, and we have the code to keep track of elements as the user scroll. Basically we need to tell the browser/code what elements we want animate. Its not going to check them all by its self, we need to tell it what to animate.

Select the element you want to animate:

In this example I say "element", but Highlevel allows us to add these custom classes to sections, rows, columns, and their full list of elements.

Hint: Click on any section, row, column, or element you want to animate and navigate to the "Advanced Tab" to add the custom classes.

Add the animate-on-scroll class first:

The animate-on-scroll class is coming from the code in step 2 and is required on all elements you want to animate.

Add the slideTop or slideBottom class after the animate-on-scroll:

After adding the animate-on-scroll class you can choose between the slideTop or SlideBottom class.

Click Save & Preview The Site

After you have carefully and possibly painstakingly gone through and added the classes to the elements, you can hit save and preview the site. Hopefully my instructions were clear enough and now you can see these super dope, super sleek animations on your site.