running-text-marquee

Summary

Two stacked infinite-scroll word tickers between the project section and the blog grid. The first ticker scrolls with data-speed="fast" toward one direction, the second toward the opposite, producing a counter-rotating word band that reads like a section divider made of typography.

HTML structure (minimal)

<div class="running-text running-1">
  <div class="carouselTicker carouselTicker-nav" data-speed="fast">
    <ul class="text-anim carouselTicker__list">
      <li>Digital Solution</li>
      <li>Development</li>
      <li>Strategy</li>
      <li>Creative Agency</li>
      <li>Design</li>
      <li>Solution</li>
      <li>Branding</li>
      <li>Idea</li>
      <!-- repeated entries to hide loop seam -->
    </ul>
  </div>
</div>

<div class="running-text">
  <div class="carouselTicker carouselTicker-start" data-speed="fast">
    <ul class="text-anim carouselTicker__list">
      <li>Digital Solution</li>
      <!-- … same word list, opposite direction -->
    </ul>
  </div>
</div>

Key SCSS tokens

.running-text {
  padding: 30px 0; border-top: 1px solid var(--rr-color-border-1);
  border-bottom: 1px solid var(--rr-color-border-1);
  .carouselTicker__list {
    display: flex; gap: 60px; list-style: none; margin: 0; padding: 0;
    li {
      font-family: var(--rr-ff-heading);
      font-style: italic; font-weight: 700; font-size: 60px;
      color: var(--rr-color-common-white); white-space: nowrap;
      &::after {
        content: "•"; margin-left: 60px;
        color: var(--rr-color-theme-primary); font-style: normal;
      }
    }
  }
}

Animation logic

// carouselTicker plugin attached to each direction class
$('.carouselTicker-nav').carouselTicker({});         // direction A
$('.carouselTicker-start').carouselTicker({});       // direction B (opposite)

Notable details

• Two opposing tickers use the same plugin but distinct class targets (carouselTicker-nav and carouselTicker-start) — this is the entire mechanism for opposite directions, no extra config object.
• The italic + uppercase + bullet-after-each-word treatment means each ticker reads more like editorial typography than a stock ticker; the cobalt dot becomes the brand accent in motion.
• Same component is reused for the testimonial intro band (div.running-text.testi) earlier on the page — there it carries just two phrases ("Customer Testimonial." / "Client Feedbacks").

Use when

• Long agency landing pages that need rhythm between sections without yet another image break.
• Brand pages where the reel of product values / services in motion replaces a hero subtitle.

Caveats

• The plugin is jQuery-only and abandoned in maintenance; for modern stacks consider porting to GSAP gsap.to(..., { x: '-=' + width, repeat: -1, ease: 'none' }) or a CSS @keyframes translateX solution.
• Word lists must be repeated by hand to mask the loop seam (notice the duplicated entries above); the plugin does not auto-clone.