CodePen Embed - Marquees

<section class="ambassadors ambassadors--css-only">
  <div class="ambassadors__text">
    <h2 class="medium-heading">
      Here is the CSS only version, made with css animations:
    </h2>
  </div>
  <div class="ambassadors__top large-heading">
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://preview.redd.it/ulu2vi4ni4w41.jpg?width=640&crop=smart&auto=webp&s=7ce21a9b3fc73dc23c9475b700592bc6aceaf07b" alt="Grace Hopper casually smoking a cigarette">
      </div>
      <p>
        <span>
          Grace
        </span>
        <span class="role">
          · Mathematician
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Ada_Lovelace_portrait.jpg" alt="painting of Ada Lovelace">
      </div>
      <p>
        <span>
          Ada
        </span>
        <span class="role">
          · Programmer
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://solarsystem.nasa.gov/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaG8zIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--90dcd5cb460c44999d7e8be1d8a9c1537d93730f/Margaret_Hamilton.jpg" alt="Margaret Hamilton showing the math for a space mission">
      </div>
      <p>
        <span>
          Margaret
        </span>
        <span class="role">
          · Computer Scientist
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://media.cleveland.com/plain-dealer/photo/2017/02/23/-15ab43bbeb622193.png" alt="Annie Easley">
      </div>
      <p>
        <span>
          Annie
        </span>
        <span class="role">
          · Computer Scientist
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://preview.redd.it/ulu2vi4ni4w41.jpg?width=640&crop=smart&auto=webp&s=7ce21a9b3fc73dc23c9475b700592bc6aceaf07b" alt="Grace Hopper casually smoking a cigarette">
      </div>
      <p>
        <span>
          Grace
        </span>
        <span class="role">
          · Mathematician
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Ada_Lovelace_portrait.jpg" alt="painting of Ada Lovelace">
      </div>
      <p>
        <span>
          Ada
        </span>
        <span class="role">
          · Programmer
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://solarsystem.nasa.gov/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaG8zIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--90dcd5cb460c44999d7e8be1d8a9c1537d93730f/Margaret_Hamilton.jpg" alt="Margaret Hamilton showing the math for a space mission">
      </div>
      <p>
        <span>
          Margaret
        </span>
        <span class="role">
          · Computer Scientist
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://media.cleveland.com/plain-dealer/photo/2017/02/23/-15ab43bbeb622193.png" alt="Annie Easley">
      </div>
      <p>
        <span>
          Annie
        </span>
        <span class="role">
          · Computer Scientist
        </span>
      </p>
    </div>
  </div>
  <div class="ambassadors__bottom large-heading">
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://preview.redd.it/ulu2vi4ni4w41.jpg?width=640&crop=smart&auto=webp&s=7ce21a9b3fc73dc23c9475b700592bc6aceaf07b" alt="Grace Hopper casually smoking a cigarette">
      </div>
      <p>
        <span>
          Grace
        </span>
        <span class="role">
          · Mathematician
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Ada_Lovelace_portrait.jpg" alt="painting of Ada Lovelace">
      </div>
      <p>
        <span>
          Ada
        </span>
        <span class="role">
          · Programmer
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://solarsystem.nasa.gov/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaG8zIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--90dcd5cb460c44999d7e8be1d8a9c1537d93730f/Margaret_Hamilton.jpg" alt="Margaret Hamilton showing the math for a space mission">
      </div>
      <p>
        <span>
          Margaret
        </span>
        <span class="role">
          · Computer Scientist
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://media.cleveland.com/plain-dealer/photo/2017/02/23/-15ab43bbeb622193.png" alt="Annie Easley">
      </div>
      <p>
        <span>
          Annie
        </span>
        <span class="role">
          · Computer Scientist
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://preview.redd.it/ulu2vi4ni4w41.jpg?width=640&crop=smart&auto=webp&s=7ce21a9b3fc73dc23c9475b700592bc6aceaf07b" alt="Grace Hopper casually smoking a cigarette">
      </div>
      <p>
        <span>
          Grace
        </span>
        <span class="role">
          · Mathematician
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Ada_Lovelace_portrait.jpg" alt="painting of Ada Lovelace">
      </div>
      <p>
        <span>
          Ada
        </span>
        <span class="role">
          · Programmer
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://solarsystem.nasa.gov/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaG8zIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--90dcd5cb460c44999d7e8be1d8a9c1537d93730f/Margaret_Hamilton.jpg" alt="Margaret Hamilton showing the math for a space mission">
      </div>
      <p>
        <span>
          Margaret
        </span>
        <span class="role">
          · Computer Scientist
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://media.cleveland.com/plain-dealer/photo/2017/02/23/-15ab43bbeb622193.png" alt="Annie Easley">
      </div>
      <p>
        <span>
          Annie
        </span>
        <span class="role">
          · Computer Scientist
        </span>
      </p>
    </div>
  </div>
</section>

<section class="ambassadors ambassadors--gsap">
  <div class="ambassadors__text">
    <h2 class="medium-heading">
      Here is the GSAP version that responds too scroll speed:
    </h2>
  </div>
  <div class="ambassadors__top large-heading">
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://preview.redd.it/ulu2vi4ni4w41.jpg?width=640&crop=smart&auto=webp&s=7ce21a9b3fc73dc23c9475b700592bc6aceaf07b" alt="Grace Hopper casually smoking a cigarette">
      </div>
      <p>
        <span>
          Grace
        </span>
        <span class="role">
          · Mathematician
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Ada_Lovelace_portrait.jpg" alt="painting of Ada Lovelace">
      </div>
      <p>
        <span>
          Ada
        </span>
        <span class="role">
          · Programmer
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://solarsystem.nasa.gov/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaG8zIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--90dcd5cb460c44999d7e8be1d8a9c1537d93730f/Margaret_Hamilton.jpg" alt="Margaret Hamilton showing the math for a space mission">
      </div>
      <p>
        <span>
          Margaret
        </span>
        <span class="role">
          · Computer Scientist
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://media.cleveland.com/plain-dealer/photo/2017/02/23/-15ab43bbeb622193.png" alt="Annie Easley">
      </div>
      <p>
        <span>
          Annie
        </span>
        <span class="role">
          · Computer Scientist
        </span>
      </p>
    </div>
  </div>
  <div class="ambassadors__bottom large-heading">
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://preview.redd.it/ulu2vi4ni4w41.jpg?width=640&crop=smart&auto=webp&s=7ce21a9b3fc73dc23c9475b700592bc6aceaf07b" alt="Grace Hopper casually smoking a cigarette">
      </div>
      <p>
        <span>
          Grace
        </span>
        <span class="role">
          · Mathematician
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Ada_Lovelace_portrait.jpg" alt="painting of Ada Lovelace">
      </div>
      <p>
        <span>
          Ada
        </span>
        <span class="role">
          · Programmer
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://solarsystem.nasa.gov/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaG8zIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--90dcd5cb460c44999d7e8be1d8a9c1537d93730f/Margaret_Hamilton.jpg" alt="Margaret Hamilton showing the math for a space mission">
      </div>
      <p>
        <span>
          Margaret
        </span>
        <span class="role">
          · Computer Scientist
        </span>
      </p>
    </div>
    <div class="ambassador large-heading">
      <div class="ambassador__image">
        <img src="https://media.cleveland.com/plain-dealer/photo/2017/02/23/-15ab43bbeb622193.png" alt="Annie Easley">
      </div>
      <p>
        <span>
          Annie
        </span>
        <span class="role">
          · Computer Scientist
        </span>
      </p>
    </div>
  </div>
</section>

@import url("https://rsms.me/inter/inter.css");

* {
  font-family: Inter, sans-serif;
  box-sizing: border-box;
  margin: 0;
}

.large-heading {
  font-size: max(1.5rem, calc(100vw / 24));
  font-weight: 400;
  letter-spacing: -0.06em;
}
.medium-heading {
  font-size: max(1.25rem, calc(100vw / 24 * 0.8));
  font-weight: 500;
  letter-spacing: -0.06em;
}

.ambassadors {
  padding: max(4rem, calc(100vw / 24 * 3)) 0;
  max-width: 100%;
  overflow: hidden;
  
  &--css-only {
    .ambassadors {
      &__top {
        animation: toRight 10s infinite linear;
        transform: translateX(-50%);
        translate: 0;
      }
      &__bottom {
        animation: toLeft 10s infinite linear;
        translate: 0;
      }
    }
  }
  &--gsap {
    background: #010101;
    color: #fff;
    min-height: 100vh;
    .ambassadors {
      &__top,
      &__bottom {
        translate: calc(-100% + 100vw) !important;
      }
    }
  }
  &__text {
    max-width: calc(100vw / 24 * 12);
    padding: 0 1.5rem;
  }
  &__top,
  &__bottom {
    position: relative;
    display: flex;
    width: max-content;
    will-change: transform;
  }
  &__top {
    margin-top: 1.5em;
  }
  &__bottom {
    margin-top: 0.8em;
  }
  .ambassador {
    padding-right: 1em;
  }
}

@keyframes toLeft {
  to {
    transform: translateX(calc(-50%));
  }
}
@keyframes toRight {
  to {
    transform: translateX(0);
  }
}

.ambassador {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4em;
  animation: animateZ 1s infinite;
  
  &__image {
    flex-shrink: 0;
    width: 1.5em;
    height: 1.5em;
    img,
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .role {
    opacity: 0.5;
  }
}

@keyframes animateZ {
  to {
    transform: translateZ(1px);
  }
}

View Compiled

gsap.registerPlugin(ScrollTrigger);

// Based on this forum post: https://gsap.com/community/forums/topic/32738-increase-speed-of-marquee-when-user-scroll/

const initMarquees = () => {
  const ambassadors = [...document.querySelectorAll(".ambassadors--gsap")];
  if (ambassadors) {
    const marqueeObject = {
      top: {
        el: null,
        width: 0
      },
      bottom: {
        el: null,
        width: 0
      }
    };
    ambassadors.forEach((ambassadorBlock) => {
      marqueeObject.top.el = ambassadorBlock.querySelector(".ambassadors__top");
      marqueeObject.bottom.el = ambassadorBlock.querySelector(
        ".ambassadors__bottom"
      );
      marqueeObject.top.width = marqueeObject.top.el.offsetWidth;
      marqueeObject.bottom.width = marqueeObject.bottom.el.offsetWidth;
      marqueeObject.top.el.innerHTML += marqueeObject.top.el.innerHTML;
      marqueeObject.bottom.el.innerHTML += marqueeObject.bottom.el.innerHTML;

      let dirFromLeft = "-=50%";
      let dirFromRight = "+=50%";
      let master = gsap
        .timeline()
        .add(marquee(marqueeObject.top.el, 20, dirFromLeft), 0)
        .add(marquee(marqueeObject.bottom.el, 20, dirFromRight), 0);
      let tween = gsap.to(master, { duration: 1.5, timeScale: 1, paused: true });
      let timeScaleClamp = gsap.utils.clamp(1, 6);
      // disabling the scrolltrigger doesn't matter for the flashing incoming new items:
      ScrollTrigger.create({
        start: 0,
        end: "max",
        onUpdate: (self) => {
          master.timeScale(timeScaleClamp(Math.abs(self.getVelocity() / 200)));
          tween.invalidate().restart();
        }
      });
    });
  }
};

const marquee = (item, time, direction) => {
  let mod = gsap.utils.wrap(0, 50);
  return gsap.to(item, {
    duration: time,
    ease: "none",
    x: direction,
    modifiers: {
      x: (x) => (direction = mod(parseFloat(x)) + "%")
    },
    repeat: -1
  });
};

initMarquees();

This Pen is owned by Cyd Stumpel on CodePen.

See more by @Sidstumple on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript