Svelte Marquee Component

Marquee.svelte

<script lang="ts">
	import logo1 from '$lib/assets/logos/logo1.png';
	import logo2 from '$lib/assets/logos/logo2.png';
	import logo3 from '$lib/assets/logos/logo3.png';
	import logo4 from '$lib/assets/logos/logo4.png';
	import logo5 from '$lib/assets/logos/logo5.jpeg';
</script>

	<div class="marquee">
		<div class="marquee__content marquee__scroll">
			<div>
				<img src={logo1} alt="Logo 1" />
			</div>
			<div>
				<img src={logo2} alt="Logo 2" />
			</div>
			<div>
				<img src={logo3} alt="Logo 3" />
			</div>

			<div>
				<img src={logo4} alt="Logo 4" />
			</div>

			<div>
				<img src={logo5} alt="Logo 5" />
			</div>
		</div>
		<div class="marquee__content marquee__scroll">
			<div>
				<img src={logo1} alt="Logo 1" />
			</div>
			<div>
				<img src={logo2} alt="Logo 2" />
			</div>
			<div>
				<img src={logo3} alt="Logo 3" />
			</div>
			<div>
				<img src={logo4} alt="Logo 4" />
			</div>

			<div>
				<img src={logo5} alt="Logo 5" />
			</div>
		</div>
	</div>

<style>
	.marquee {
		--marquee-gutter: 60px;
		--marquee-item-width: 250px;
		--marquee-item-height: 180px;
		--marquee-scroll-duration: 15s;
		--marquee-gradient-color: var(--body-bg);

		display: flex;
		align-items: stretch;
		justify-content: space-between;
		grid-column-gap: var(--marquee-gutter);
		grid-row-gap: var(--marquee-gutter);
		width: 100%;
		max-width: 100vw;
		overflow: hidden;
		position: relative;
	}

	.marquee::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			90deg,
			var(--marquee-gradient-color) 0%,
			transparent 35%,
			transparent 65%,
			var(--marquee-gradient-color) 100%
		);
		pointer-events: none;
	}

	.marquee__content {
		grid-column-gap: var(--marquee-gutter);
		flex-flow: row;
		flex: none;
		justify-content: space-around;
		align-items: stretch;
		min-width: 100%;
		display: flex;
	}

	.marquee__content > div {
		width: var(--marquee-item-width);
		height: var(--marquee-item-height);
	}

	.marquee__content img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.marquee__scroll {
		animation: marquee__scroll var(--marquee-scroll-duration) linear infinite;
	}

	@keyframes marquee__scroll {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(calc(-100% - var(--marquee-gutter)));
		}
	}
</style>