Recently I’ve tried to follow a youtube tutorial on scroll animations using IntersectionObserver, I followed step by step but it seems when min-weight is set to 100vh, 2 sections load in at the same time, not allowing the 2nd one to ever change.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Tutorial Beyond Fireship</title>
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
</head>
<body>
<section class="hidden">
<h1>Hi Mom!</h1>
<p>This is my website</p>
</section>
<section class="hidden">
<h2>Buy my products</h2>
<p>
The things you own end up owning you.
It's only after you lose everything that you're free to do anything
</p>
</section>
<section class="hidden">
<h2>It's really good</h2>
<div class="logos">
<div class="logo hidden">
<img src="Images/icons8-steam-75.png">
</div>
<div class="logo hidden">
<img src="Images/icons8-nintendo-switch-logo-75.png">
</div>
<div class="logo hidden">
<img src="Images/icons8-ps5-75.png">
</div>
<div class="logo hidden">
<img src="Images/icons8-xbox-75.png">
</div>
</div>
</section>
</body>
</html>`
`let observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry) //check
if (entry.isIntersecting){
entry.target.classList.add('show');
} else{
entry.target.classList.remove('show');
}
})
});
let hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => observer.observe(el));`
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap');
body{
background-color: black;
color: white;
font-family: 'Poppins', sans-serif;
padding: 0;
margin: 0;
}
section{
display: grid;
place-items: center;
align-content: center;
min-height: 100vh;
}
.hidden{
opacity: 0;
filter: blur(5px);
transform: translateX(-100%);
transition: all 1.5s;
}
.show{
opacity: 1;
filter: blur(0);
transform: translateX(0);
}
.logos{
display: flex;
}
.logo{
margin: 1rem;
}
.logo:nth-child(2){
transition-delay: 200ms;
}
.logo:nth-child(3){
transition-delay: 400ms;
}
.logo:nth-child(4){
transition-delay: 600ms;
}
@media(prefers-reduced-motion){
.hidden{
transition: none;
}
}
I tried setting min-height to 101vh which works, and adding threshold 0.5, which breaks my website.
New contributor
IceWolffy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.