split-text-hero

Summary

Tall dark hero with three stacked headlines (a small sub-title, a large h2, and a bottom h3) animated character-by-character via SplitType + GSAP. A trio of 250×250 offset square photos sits on the left, a single oversized photo bleeds off the right, and a circular arrow CTA anchors the centre. Designed to feel like a kinetic editorial cover.

HTML structure (minimal)

<section class="hero-section">
  <div class="hero-bg-shape"><img src="assets/img/bg-img/hero-bg-shape.png" alt="shape"></div>
  <div class="hero-shape"><img src="assets/img/shapes/hero-shape-1.png" alt="shape"></div>
  <div class="hero-images">
    <img src="assets/img/images/hero-img-1.png" alt="hero">
    <img src="assets/img/images/hero-img-2.png" alt="hero">
    <img src="assets/img/images/hero-img-3.png" alt="hero">
  </div>
  <div class="hero-img"><img src="assets/img/images/hero-img.png" alt="hero"></div>
  <div class="container">
    <div class="hero-content">
      <h4 class="sub-title anim-text">Transforming</h4>
      <h2 class="title anim-text">Visions into</h2>
      <h3 class="bottom-title anim-text">Digital Reality</h3>
      <a href="about.html" class="hero-btn"><i class="fa-thin fa-arrow-right"></i></a>
    </div>
  </div>
</section>

Key SCSS tokens

.hero-section { position: relative; overflow: hidden; z-index: 1;
  .hero-img { position: absolute; bottom: -22.5px; right: 0; }
  .hero-images { display: flex; flex-direction: column; position: absolute;
    bottom: 0; left: 0; width: 510px;
    img { height: 250px; width: 250px; object-fit: cover;
      &:nth-child(2) { margin: -30px 0 12px auto; }
      &:nth-child(3) { margin-left: 50px; }
    }
  }
}
.hero-content { padding: 300px 0 150px; max-width: 820px; margin: 0 auto;
  padding-left: 55px; position: relative; z-index: 2;
  .title { font-size: 220px; font-weight: 700; line-height: 1; }
}

Animation logic

$(window).on("load", function () {
  $("#preloader").delay(1000).fadeOut(500);
  setTimeout(() => {
    $(".anim-text").each(function () {
      var $this = $(this);
      new SplitType($this, { types: "lines, chars", className: "char" });
      var chars = $this.find(".char");
      gsap.fromTo(
        chars,
        { y: "100%" },
        { y: "0%", duration: 0.9, stagger: 0.03, ease: "power2.out" }
      );
    });
  }, 1000);
});

Notable details

• All three headline lines share a single .anim-text class; the JS loops once and creates an independent SplitType + GSAP timeline per line, so adding a fourth line is markup-only.
• The 1000 ms setTimeout aligns with the preloader fade-out; characters start animating exactly as the preloader disappears, masking the SplitType DOM mutation.
• .hero-images is a vertical column of three squares with negative-margin offsets, not a CSS grid — gives the photos a hand-collaged feel rather than a perfectly aligned tiling.

Use when

• Photography-heavy landing pages where a typographic moment must drive the first impression.
• Agency or portfolio homepages that benefit from a per-letter reveal rather than fade-up paragraphs.
• Heroes that mix multiple offset images with a single typographic centerpiece.

Caveats

• Requires SplitType to be loaded before the inline IIFE runs; if you swap the script order the hero will paint with y:100% chars and never animate.
• The .hero-img photo on the right is hidden under 768 px (display:none at breakpoint(sm)), so on phones the hero relies entirely on the typography.
• Character counts in headlines longer than ~12 letters can blow out at 1440 px — the title font is 220 px on desktop.