🧜‍♂️Building a Modern AI Website with Locomotive Scroll and GSAP🫠

#frontendchallenge #webdev #javascript #beginners

In this post, we'll dive into the process of creating a sleek, modern AI-themed website using cutting-edge technologies like Locomotive Scroll and GSAP. This tutorial will guide you through the code, explaining the design decisions, implementation steps, and benefits of using these tools for creating interactive and responsive web pages.

Key Features of the Website

Smooth Scrolling and Interactions: We use Locomotive Scroll for smooth scrolling, giving the website a polished, modern feel.
Dynamic Animations: GSAP's ScrollTrigger is integrated to create captivating animations that trigger as the user scrolls through different sections.
Responsive Design: The site is fully responsive, with a mobile-friendly navigation menu and adaptive content layout.
Glassmorphism and Matte Effects: These design trends are applied throughout the website for a visually appealing, modern UI.
Design Decisions
Color Palette: The website uses a vibrant color palette, combining primary colors like #ff6b6b and accent colors such as #48dbfb to create a lively and engaging experience. The color scheme ensures that the content is visually accessible while maintaining an attractive, AI-themed aesthetic.
Glassmorphism: The use of semi-transparent backgrounds (var(--glass-color)) with a blur effect creates a stylish, glass-like surface for cards and mobile navigation.
Matte Finish: Sections are framed with a matte finish (var(--matte-color)), adding contrast and depth to the design, making it stand out without overpowering the content.

Benefits of Locomotive Scroll & GSAP

Enhanced Performance: Locomotive Scroll optimizes scroll behavior, providing smooth transitions and minimizing janky animations across all devices.
Custom Scroll Animations: GSAP ScrollTrigger allows for precise control over when animations start, making the content more engaging as users scroll.
Responsive Animations: With GSAP, animations can adapt to various screen sizes, ensuring that they look great on both desktops and mobile devices.

Code Breakdown

Header and Footer: The header and footer are fixed at the top and bottom, respectively, ensuring consistent navigation and branding throughout the user experience.
Mobile Navigation: A hamburger menu and mobile navigation panel are included to ensure accessibility on smaller devices. The menu slides in from the right, matching modern UI trends.
Interactive Sections: Each section features unique animations triggered by scroll actions. For instance, in Section 2, cards animate into view with a smooth translation, enhancing the visual storytelling.

Implementation Steps

Locomotive Scroll Setup: Integrate Locomotive Scroll for smooth scrolling across the entire website.
GSAP ScrollTrigger Animations: Define scroll-triggered animations for different sections, ensuring that content enters the viewport dynamically.
Responsive Design: Use media queries and flexbox to ensure the design adapts seamlessly to different screen sizes.

HTML CODE:

<!-- Header -->
    <header>
        <div class="logo">AI Solutions</div>
        <nav style="    margin-right: 3rem;">
            <ul>
                <li><a href="#section1" data-scroll-to>Home</a></li>
                <li><a href="#section2" data-scroll-to>Automation</a></li>
                <li><a href="#section3" data-scroll-to>Insights</a></li>
                <li><a href="#section4" data-scroll-to>Future</a></li>
            </ul>
        </nav>
        <div class="hamburger" id="hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </header>

    <!-- Mobile Navigation -->
    <div class="mobile-nav" id="mobile-nav">
        <div class="close-icon" id="close-icon">&times;</div>
        <ul>
            <li><a href="#section1" data-scroll-to>Home</a></li>
            <li><a href="#section2" data-scroll-to>Automation</a></li>
            <li><a href="#section3" data-scroll-to>Insights</a></li>
            <li><a href="#section4" data-scroll-to>Future</a></li>
        </ul>
    </div>

    <!-- Sections -->
    <section class="section" id="section1" data-scroll-section style="">
        <div class="content">
            <h1>
                <span id="bounce-text"
                    style="background-color: #48dbfb; padding: 2px 6px; border-radius: 8px 2px;">AI</span> Solutions
                for a Modern World
            </h1>

            <p>Revolutionize your business with cutting-edge AI technology.</p>
        </div>
        <div class="wave">AI</div>
        <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
            <circle cx="50" cy="50" r="48" fill="none" stroke="var(--accent-color)" stroke-width="1">
                <animate attributeName="r" from="0" to="48" dur="6s" repeatCount="indefinite" />
            </circle>

        </svg>
    </section>

    <section class="section" id="section2" data-scroll-section>
        <div class="content">
            <h2>Intelligent Automation</h2>

            <div class="section-cards">
                <div class="card"> <i class="fas fa-robot"></i>
                    <h3>Automation</h3>
                    <p>Optimize your workflow with our automation tools.</p>
                </div>
                <div class="card"> <i class="fas fa-chart-line"></i>
                    <h3>Analytics</h3>
                    <p>Gain insights with real-time AI-driven analytics.</p>
                </div>
                <div class="card"> <i class="fas fa-cogs"></i>
                    <h3>Management</h3>
                    <p>Streamline processes with AI management.</p>
                </div>
            </div>


        </div>
    </section>

    <section class="section" id="section3" data-scroll-section>
        <div class="content">
            <h2>Data-Driven Insights</h2>
            <div class="breadcrumb">
                <a href="#section1">Home</a> &gt; <a href="#section3">Insights</a>
            </div>
            <p>Unlock the power of your data with advanced AI analytics.</p>
        </div>
    </section>

    <section class="section" id="section4" data-scroll-section>
        <div class="content">
            <h2>The Future of AI</h2>
            <p>Explore the potential of AI in transforming industries.</p>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div>&copy; 2024 AI Solutions. All Rights Reserved.</div>
        <div class="social-icons">
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-linkedin-in"></i></a>
            <a href="#"><i class="fab fa-github"></i></a>
        </div>
    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js"></script>

CSS CODE:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #ff6b6b;
            --secondary-color: #f8c291;
            --accent-color: #48dbfb;
            --text-color: #ffffff;
            --bg-color: #2c3e50;
            --glass-color: rgba(255, 255, 255, 0.1);
            --matte-color: #1c2833;
        }

        body {
            margin: 0;
            font-family: 'Arial', sans-serif;
            color: var(--text-color);
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            overflow: hidden;
        }

        header,
        footer {
            position: fixed;
            width: 100%;
            z-index: 1000;
            background: var(--matte-color);
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        header {
            top: 0;
        }

        footer {
            bottom: 0;
            flex-direction: column;
            text-align: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--text-color);
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 20px;
            margin: 0;
            padding: 0;
        }

        nav ul li a {
            color: var(--text-color);
            text-decoration: none;
            font-size: 1rem;
            transition: color 0.3s;
        }

        nav ul li a:hover {
            color: var(--accent-color);
        }

        .hamburger {
            display: none;
            cursor: pointer;
            flex-direction: column;
            gap: 5px;
            margin-right: 2rem;

        }

        .hamburger span {
            width: 25px;
            height: 3px;
            background-color: var(--text-color);
        }

        .mobile-nav {
            display: none;
            flex-direction: column;
            position: fixed;
            top: 0;
            right: 0;
            height: 100%;
            width: 300px;
            background: var(--glass-color);
            padding-top: 60px;
            gap: 20px;
            align-items: center;
            backdrop-filter: blur(20px);
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
            transition: transform 0.3s ease-in-out;
            transform: translateX(100%);
        }

        .mobile-nav.active {
            transform: translateX(0);
        }

        .close-icon {
            position: absolute;
            top: 15px;
            right: 15px;
            cursor: pointer;
            font-size: 1.5rem;
            color: var(--accent-color);
        }

        .section {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            padding: 40px 20px;
            box-sizing: border-box;
            overflow: hidden;
            font-size: 2rem;
            background: var(--matte-color);
            color: var(--text-color);
            margin-bottom: 20px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

        }

        .section h1,
        .section h2,
        .section p {
            margin: 0;
            padding: 10px 0;
        }

        #section1 {
            display: flex;
            flex-direction: column;
            text-align: center;
            background: var(--glass-color);
        }

        #section2 .card {
            background: var(--glass-color);
            padding: 20px;
            margin: 10px 0;
            border-radius: 10px;
            backdrop-filter: blur(10px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s;
            color: var(--text-color);
            max-width: 300px;
        }

        #section2 .card:hover {
            transform: translateY(-10px);
        }

        #section3 .breadcrumb {
            display: flex;
            gap: 5px;
            color: var(--accent-color);
        }

        #section3 .breadcrumb a {
            text-decoration: none;
            color: var(--accent-color);
            transition: color 0.3s;
        }

        #section3 .breadcrumb a:hover {
            color: var(--text-color);
        }

        #section4 .content {
            text-align: center;
            padding: 0 20px;
        }

        footer .social-icons a {
            color: var(--text-color);
            margin-left: 10px;
        }

        #section1 .wave {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 5rem;
            font-weight: bold;
            opacity: 0.1;
            animation: wave 4s infinite linear;
        }

        #section1 svg {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 0;
            opacity: 0.5;
        }

        .fas {
            color: #48dbfb;
        }

        .section-cards {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4rem;
        }

        @keyframes wave {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            nav ul {
                display: none;
            }

            .hamburger {
                display: flex;
            }

            .section {
                font-size: 1.5rem;
                padding: 30px 10px;
            }

            #section2 .card {
                max-width: 100%;
            }

            .section-cards {
                display: grid;
                align-items: center;
                justify-content: center;
                gap: 4rem;
            }
        }
    </style>