@keyframes move {
	to {
		/* Move horizontally so that right edge is aligned against the viewport */
		transform: translateX(calc(-100% + 100vw));
	}
}

#sectionPin {
	/* Stretch it out, so that we create room for the horizontal scroll animation */
	height: 500vh;
	overflow: visible; /* To make position sticky work … */

	view-timeline-name: --section-pin-tl;
	view-timeline-axis: block;
}

.pin-wrap-sticky {
	/* Stick to Top */
	height: 100vh;
	width: 99vw;
	position: sticky;
	top: 0;
	overflow-x: hidden;
}

.pin-wrap {
	height: 100vh;
	width: 400vw;

	/* Hook animation */
	will-change: transform;
	animation: linear move forwards;

	/* Link animation to view-timeline */
	animation-timeline: --section-pin-tl;
	animation-range: contain 0% contain 100%;
}


.img {
  background-image: url("https://images.unsplash.com/photo-1701735168006-1c7cbb9caff9?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDM2MDg1MjR8&ixlib=rb-4.0.3&q=85");
  width: 300px;
  height: 200px;
  background-size: 300px;
  background-repeat: no-repeat;
  background-position: center;

  animation-range: cover 0% cover 100%;
  animation: the-animation linear;
  animation-timeline: --section-pin-tl;
  animation-iteration-count: 1;
}

@keyframes the-animation {
  to {
    background-size: 500px;
  }
}