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