sardines.html

sardines.css

*,
*::before,
*::after {
	box-sizing: border-box;
}
body {
	background-color: #3848a0;
	font-family: 'Open Sans', arial, sans-serif, system-ui;
	margin: 0 auto;
}
.porto {
	color: #f5dbc8;
	padding: 32px;
	text-align: center;
}
h2 {
	line-height: 1;
	text-transform: uppercase;
}
.porto p {
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	max-width: 40ch;
}
.flex-wrapper {
	align-items: center;
	display: flex;
	gap: 2rem;
}
.content-container {
	margin-inline: auto;
	width: 90vw;
}

.vertical-scroll-container {
	align-items: center;
	display: flex;
	flex-direction: column;
	flex: 1 1 50%;
	gap: 6rem 0;
	min-width: 400px;
	overflow-y: scroll;
	scrollbar-color: #3848a0 #1b2767;
	scroll-snap-type: y mandatory;
	padding: 200px 20px;
	height: 400px;
}
.vertical-scroll-container img {
	scroll-snap-align: center;
	width: 400px;

	animation: slideInOut;
	animation-timeline: view();
}
/* old keyframes 
@keyframes slideIn {
  from {
    transform: scale(.8) translateY(100px); 
    opacity: 0;
  }
  to { 
    transform: scale(1) translateY(0); 
    opacity: 1;
  }
}
@keyframes slideOut {
  from {
    transform: scale(1) translateY(0); 
    opacity: 1;    
  }
  to { 
    transform: scale(.8) translateY(-100px); 
    opacity: 0 
  }
} */

/* NEW target range in keyframes */
@keyframes slideInOut {
	entry 0% {
		transform: scale(0.8) translateY(100px);
		opacity: 0;
	}
	entry 100% {
		transform: scale(1) translateY(0);
		opacity: 1;
	}
	exit 0% {
		transform: scale(1) translateY(0);
		opacity: 1;
	}
	exit 100% {
		transform: scale(0.8) translateY(-100px);
		opacity: 0;
	}
}

@media screen and (max-width: 40em) {
	.vertical-scroll-container img {
		padding: 0;
		width: 300px;
	}
}

sardines.html

<section class="porto">
	<div class="content-container flex-wrapper">
		<div class="vertical-scroll-container">
			<img
				src="https://marianabeldi.github.io/scroll-driven-sardinas/img/porto1.svg"
				alt="sardinas bajo en sodio"
			/>
			<img
				src="https://marianabeldi.github.io/scroll-driven-sardinas/img/porto2.svg"
				alt="sardinas sin piel"
			/>
			<img
				src="https://marianabeldi.github.io/scroll-driven-sardinas/img/porto3.svg"
				alt="sardinas en agua"
			/>
			<img
				src="https://marianabeldi.github.io/scroll-driven-sardinas/img/porto4.svg"
				alt="sardinas al limon"
			/>
		</div>
	</div>
</section>