In this short guide I am going to show you the easiest way to add a touch of magic to your Highlevel website or funnel. By magic, I really mean I am going to show you how to add a simple and sleek fade-in animation. There is no coding knowledge required, but I'll give you a peek into the code and briefly explain what its doing for anyone that cares.

A simple fadeIn animations can significantly improve user engagement and the overall aesthetic of your site. This guide will be super straight forward because there are really only 3 keys steps to adding them in the Highlevel website/funnel builder.

Overview:

Step1: Add the CSS

Step 2: add the Javascript for animate on scroll

Step 3: Add the class names to the elements you want animated

Step 1: CSS for FadeIn Animations

Let's start with the CSS. Feel free to just copy and paste this in the Custom CSS tab, but its worth reading what you are pasting as its pretty easy to understand if you are unfamiliar.

First we need to define how our fadeIn animations will look and how long to wait before they fire. I know for some people this code may seem like magic, but a close look will reveal a lot.

We're basically playing with the same animation (fadeIn),and tweaking the loading times to spice things up. You've got fadeIn1, fadeIn2, fadeIn3, and so on. (please note the capital I after the word fade.)

Having 5 different fadeIn classes gives you a little more "spice" and professional look vs everything appearing all at once.

• Find the 'Custom CSS' Tab: Jump into your HighLevel funnel builder, and look for the 'Custom CSS' tab. You can find it along the top navigation row.

• Paste these CSS Classes: Here’s the CSS you need. It's straightforward – different speeds for different needs. Copy and paste this: (Make sure you are copying everything to avoid pasting only partial code.)

/* Base fadeIn animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fadeIn1.in-view { animation: fadeIn ease 1s; animation-fill-mode: forwards; }
.fadeIn2.in-view { animation: fadeIn ease 2s; animation-fill-mode: forwards; }
.fadeIn3.in-view { animation: fadeIn ease 3s; animation-fill-mode: forwards; }
.fadeIn4.in-view { animation: fadeIn ease 4s; animation-fill-mode: forwards; }
.fadeIn5.in-view { animation: fadeIn ease 5s; animation-fill-mode: forwards; }

If you want to add additional classes copy this and modify it as needed:

.fadeIn6.in-view { animation: fadeIn ease 6s; animation-fill-mode: forwards; }

Step 2: JavaScript for Scroll-Triggered Animations

Step two is easy, just copy the block of code, move back to your website / funnel builder in Highlevel, open the custom tracking code and paste the script at the bottom of the "Footer" tab, then click save.

The custom tracking code is the </> icon in the same navigation as the custom css tab

Feel free to just copy and pste this code in either the Footer tracking code, or you can add a custom code element and paste it in there.

If you want to know more about what this code does I will briefly explain it below.

Two key aspects of the code:

By default the code for the animations are going to fire as soon as the page loads, this piece of code is going to check for a class name called "animate-on-scroll" and will wait until it is in-view before the animation fire. Because whats the point of an animation if it fires before anyone can see it?

There is also a piece of code that is going to add a class named "animated" after the animation has fired - this animated class is going to make sure each animation only happens the first scroll down the page. Having animations fire over and over as our user scrolls up and down the page will quickly become annoying and more confusing than beautiful.

Copy this code in the Footer tab of the Custom Tracking tab

Whether that made sense or not, you really just need to copy this code in the Footer of the tracking code, or you can add a code block element and just paste the code in there.

• Open the 'Tracking Code' Tab: This is where you'll put your JavaScript.

• Insert the JavaScript in Footer Tracking: Below is a jQuery script to handle the scroll-triggered animations. Paste this in the 'Footer Tracking Code' section:

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

Ok that is the last we need to mess with anything custom code related - now we just need to connect the classes to the elements we want animated.

Step 3: Applying Animations to Your Elements

We made it to the last step! Now that we have the styles for the animations, we have the code to track the elements, we need to start telling the page what elements we want to animate.

One thing I love about Highlevels website and funnel builder is the ability to add a custom class to section, rows, columns, and all the elements. This gives us a wide range of options we can use to really enhance our sites and make them look more visually appealing and something closer to a modern website and not something straight out of Windows 95.

Tip: The custom class tab is under the "Advanced Tab".

• Choose an Element: In your editor, select the element you want to animate.

• Assign Classes: Start by adding 'animate-on-scroll' followed by the specific fadeIn class (like 'fadeIn3') to your element in its settings.

• Test and Tweak: Preview your page. If something's off, adjust the settings or class duration.

Try using various of the fadeIn animation to see what looks best to you.

As you start picking elements to animate, you've got the choice of fadeIn1-5. But feel free to get creative and add more variations to suit your style.

These fadeIn animations are a game-changer for text, cards, images, and everything else on your website or funnel. They add that modern, professional vibe that screams 'top-notch'.

Wrapping It Up

So there you have it! Adding fadeIn animations to your HighLevel site is that simple. These animations aren't just visually appealing; they make your site feel more dynamic and engaging. Experiment with different speeds and see what works best for your design.