team-marquee-slider

Summary

Six-up Swiper team rail layered with a scroll-driven horizontal nudge: as the user scrolls into the section, the whole strip glides from x:25% to x:-100% on scrub. Each card has its own mousemove parallax via tp-hover-btn-wrapper, and clicking a name opens a member modal.

HTML structure (minimal)

<div class="tp-team-area pt-20 pb-120 fix">
  <div class="container-fluid">
    <div class="tp-team-slider-wrapper">
      <div class="swiper-container tp-team-slider-active">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="tp-team-item tp-hover-btn-wrapper marque fix mb-30">
              <div class="tp-hover-btn-item">
                <img src="/team-1.jpg" alt="" width="375" height="464">
              </div>
              <div class="tp-team-content">
                <span>Designer</span>
                <h4 class="tp-team-title-sm" onclick="…">
                  <a href="/team-details/1">Louis Fantun</a>
                </h4>
              </div>
            </div>
          </div>
          <!-- more slides -->
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.tp-team-item { position: relative; overflow: hidden; }
.tp-team-item img { transition: transform .8s ease; }
.tp-team-item:hover img { transform: scale(1.04); }
.tp-team-content { padding-top: 16px; }
.tp-team-content span { color: var(--tp-text-body); font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.tp-team-title-sm { font-size: 22px; cursor: pointer; }

Animation logic

// Swiper init (slidesPerView 6, loop true, FreeMode + Autoplay)
new Swiper('.tp-team-slider-active', {
  modules: [Autoplay, FreeMode],
  slidesPerView: 6, loop: true, spaceBetween: 30,
});

// teamMarqueAnim() in src/utils/scroll-marque.ts
gsap.set('.tp-team-item.marque', { x: '25%' });
gsap.timeline({
  scrollTrigger: {
    trigger: '.tp-team-area',
    start: '-1000 10%',
    end: 'bottom 20%',
    scrub: true,
    invalidateOnRefresh: true,
  },
}).to('.tp-team-item.marque', { x: '-100%' });

// hoverBtn() — per-card mousemove parallax (uses jQuery offset + GSAP)

Notable details

• Combining a Swiper loop with a ScrollTrigger scrub X-shift gives two layers of motion: the slider's own glide and the section-level scroll glide.
• Per-card mousemove parallax (tp-hover-btn-wrapper + tp-hover-btn-item) makes images shift toward the cursor — a subtle Awwwards trick.
• Clicking the name opens a controlled team modal (<TeamModal>), but the link <a> still routes to the team-details page for SSR/SEO.

Use when

• Team or roster strips that should feel alive even when nobody is dragging the slider.
• Agencies with many people where a 6-up rail is more honest than a curated grid.

Caveats

• Requires jQuery for hoverBtn parallax. Replace with vanilla getBoundingClientRect if dropping jQuery.
• Both modal click and link navigation fire — you may want to preventDefault if the modal is the primary affordance.