project-textline-marquee

Summary

Oversized scroll-driven text marquee that repeats the phrase "Co(shape)lest Project" four times, alternating filled and outlined glyphs with an inline shape image baked in. Translates -80% as the user scrolls, scrubbed to scroll position so it reads at reading pace.

HTML structure (minimal)

<div class="tp-project-textline tp-project-effect mb-115" data-scrub="0.0001">
  <span class="textline-1">Co<span><img src="/project-shape-1-1.png" alt=""></span>lest</span>
  <span class="textline-2">Project</span>
  <!-- repeat 3x -->
</div>

Key SCSS tokens

.tp-project-textline {
  display: inline-flex;
  align-items: center;
  gap: 60px;
  white-space: nowrap;
  font-size: 280px;
  line-height: 1;
  font-family: var(--tp-ff-gallery);
}
.tp-project-textline .textline-1 { color: var(--tp-common-black); }
.tp-project-textline .textline-2 {
  color: transparent;
  -webkit-text-stroke: 1px var(--tp-common-black);
}
.tp-project-textline span img { display: inline-block; vertical-align: middle; }

Animation logic

useGSAP(() => {
  gsap.set('.tp-project-textline', { x: '25%' });
  gsap.timeline({
    scrollTrigger: {
      trigger: '.tp-project-textline',
      start: '-1500 10%',
      end: 'bottom 20%',
      scrub: true,
      invalidateOnRefresh: true,
    }
  }).to('.tp-project-textline', { x: '-80%' });
});

Notable details

• Mixing filled (textline-1) and outline-only (textline-2) glyphs in alternating tokens turns the marquee into a typographic pattern instead of a flat banner.
• Inline <img> between letters of a word — uncommon, gives the wordmark texture without an SVG mask.
• Long negative start offset (-1500 10%) means the marquee is already mid-scroll when the user reaches it, so it never sits frozen.

Use when

• As a kinetic divider between portfolio rows or sections when you want typography itself to be the decoration.
• Awwwards-style sites where you want the page rhythm to alternate between content and pure type sections.

Caveats

• Very wide single line — must live in overflow:hidden parent.
• Custom gallery_modernregular font does the heavy lifting; fallback fonts will look pedestrian.