Gravity Coding Watch on YouTube

Creating Website with Scroll Animation using GSAP & Scroll Trigger | HTML, CSS, JS Tutorial

3 min read 2 months ago
Published on Oct 07, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, we will create a visually stunning Cold Drink website featuring scroll animations using GSAP (GreenSock Animation Platform) and the Scroll Trigger plugin. This guide is perfect for web developers of all levels looking to enhance their skills in web animation and improve user engagement through interactive designs.

Step 1: Set Up the HTML Structure

Start by creating a basic HTML structure for your website. This structure will serve as the foundation for the CSS styling and GSAP animations.

  1. Create an index.html file.
  2. Include the following basic HTML structure:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cold Drink Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Welcome to Cold Drinks</h1>
    </header>
    <section class="about">
        <h2>About Us</h2>
        <p>Learn about our delicious cold drinks!</p>
    </section>
    <section class="menu">
        <h2>Our Menu</h2>
        <p>Explore our variety of cold drinks.</p>
    </section>
    <section class="contact">
        <h2>Contact Us</h2>
        <p>Get in touch for more information!</p>
    </section>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Step 2: Craft the CSS Design

Next, we will style the website using CSS to make it visually appealing.

  1. Create a style.css file.
  2. Add styles for the body, header, and sections:
    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

header {
    background-color: #f8b400;
    color: white;
    text-align: center;
    padding: 50px 0;
}

section {
    height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.about {
    background-color: #ff6f61;
}

.menu {
    background-color: #6b5b93;
    color: white;
}

.contact {
    background-color: #88b04b;
    color: white;
}

Step 3: Integrate GSAP and ScrollTrigger

We will now set up GSAP and ScrollTrigger to add animations to our website.

  1. In your script.js file, initialize GSAP and ScrollTrigger:

    gsap.registerPlugin(ScrollTrigger);

  2. Create scroll-triggered animations for each section:

    gsap.from(".about", {
    scrollTrigger: {
        trigger: ".about",
        start: "top center",
        end: "bottom center",
        scrub: true,
    },
    y: 100,
    opacity: 0,
    duration: 1,
});

gsap.from(".menu", {
    scrollTrigger: {
        trigger: ".menu",
        start: "top center",
        end: "bottom center",
        scrub: true,
    },
    x: -100,
    opacity: 0,
    duration: 1,
});

gsap.from(".contact", {
    scrollTrigger: {
        trigger: ".contact",
        start: "top center",
        end: "bottom center",
        scrub: true,
    },
    y: 100,
    opacity: 0,
    duration: 1,
});

Step 4: Explore Advanced Animation Techniques

Once you have the basic animations working, consider adding more advanced features, such as:

  • Staggering animations for lists of items.
  • Using timelines to sequence animations.
  • Custom easing functions to make animations feel more natural.

Step 5: Debugging and Troubleshooting

Here are some common issues to watch out for:

  • Ensure the GSAP and ScrollTrigger scripts are correctly linked.
  • Check for typos in class names or JavaScript code.
  • Use browser developer tools to monitor console errors.

Conclusion

In this tutorial, we successfully created a Cold Drink website with scroll animations using GSAP and Scroll Trigger. You now have a solid foundation in web animation, which can be applied to various projects.

Next Steps

  • Experiment with different animation effects and timings.
  • Explore additional GSAP features and plugins for enhanced animations.
  • Consider integrating more complex layouts and responsive design techniques.

Happy coding!

Table of Contents

Recent