Responsive animated hero section built with HTML and CSS, enhanced with GSAP animations for smooth entrance effects and engaging visual interaction.

Includes staggered animations, clean layout structure, and optimized performance for fast loading and better user experience. Suitable for modern landing pages and portfolio websites, with easy customization and mobile-friendly design.

Final output:

Final Output Code for Animated Hero Section (HTML, CSS, GSAP):

Head

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">

HTML

<section class="hero-section">
    <div class="tagline">Welcome to the future</div>
    <h1>Craft The <br> Extraordinary</h1>
    <p class="hero-description">Where bold vision meets meticulous execution. We transform ideas into unforgettable
        digital experiences.</p>
    <button>Get Started</button>
    <div class="gradient-rule"></div>
</section>


<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>
<script>
    gsap.fromTo(
        ".hero-section *",
        {
            y: 20,
            opacity: 0
        },
        {
            y: 0,
            opacity: 1,
            duration: .8,
            delay: 0.5,
            stagger: 0.25,
            ease: "power.in"
        }
    );

</script>

CSS

  * {
      margin: 0;
      box-sizing: border-box;

  }

  body {
      font-family: Arial, Helvetica, sans-serif;
  }

  .hero-section {
      background-color: #0a0a0a;
      width: 100%;
      min-height: 100dvh;
      text-align: center;
      align-content: center;
  }

  .tagline {
      font-size: .875rem;
      color: #fcbb00e6;
      text-transform: uppercase;
      letter-spacing: 4px;
      margin-bottom: 2rem;
  }

  h1 {
      font-size: clamp(3rem, 12vw, 9rem);
      font-family: "DM Serif Display", serif;
      font-weight: 500;
      color: #f6f8fa;
      line-height: .9;
      margin-bottom: 2rem;
  }

  .hero-description {
      color: #90a1b9;
      font-size: clamp(1rem, 2vw, 1.5rem);
      line-height: 1.625;
      max-width: 42rem;
      margin-inline: auto;
      margin-bottom: 3rem;
  }

  button {
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.5;
      padding: 1.25rem 3rem;
      border-radius: 5rem;
      border: 0;
      color: #fff;
      background: linear-gradient(to right, #fe9a00, #f54a00);
      z-index: 2;
      cursor: pointer;
  }

  .gradient-rule {
      margin-inline: auto;
      width: 1px;
      height: 4rem;
      background: linear-gradient(#ffb900, transparent);
      z-index: 1;
  }

If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.