Issue
I have been reading for over 12 hours on this issue but I still can not get this figure out, I am trying to use IntersectionObserver with Fullpage Scroll so When each section enters the view port the animation triggers and when it is out of view port the animated element goes back to its original state, but for some reason I would appreciate any help. I am very new to this
new fullpage('#fullpage', {
autoScrolling: true,
navigation: true
})
const sections = document.querySelectorAll('.section');
observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.intersectionRatio > 0) {
entry.target.style.animation = `square-animation 2s ${entry.target.dataset.delay} forwards ease-out`;
}
else {
entry.target.style.animation = 'none';
}
})
})
sections.forEach(sections => {
observer.observe(sections)
})
.section {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
.section.one {
background-color: rgb(6, 245, 245);
}
.section.two {
background-color: rgb(0, 149, 255);
}
.section.three {
background-color: rgb(112, 46, 46);
}
.section.four {
background-color: rgb(157, 115, 160);
}
.square {
width: 200px;
height: 200px;
border-radius: 20px;
background: orange;
}
@keyframes square-animation {
0% {
transform: scale(0, 0.025);
}
50% {
transform: scale(1, 0.025);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.css" integrity="sha512-NGRhMiWY9pf5z8PLens7/u+LLwIPAu1dhJ7u9sHRWIo8TKrVbKiWlRdYRH3pVDCZA10zmobo+PBLGeLOREklBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div id="fullpage">
<div class="section one">Section One </div>
<div class="section two">Section two
<div class="square"></div>
</div>
<div class="section three">Section Three</div>
<div class="section four">Section Four</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.js" integrity="sha512-ojnoeSkK5NDwnuW5S0ZnddobHez8Bx1yVa3RE+Cd0fGEuY/NEd4sgVF/CJ6eDtnOeLZLbTJpNFrCkUYbHS2hRA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>"
<script src="fullpage.js"></script>
</body>
</html>
Solution
There's a couple of issues with your code
The animation style rule is malformed
The animation rule contains ${entry.target.dataset.delay}
.
the value for that is undefined
, so the applied rule becomes: square-animation 2s undefined forwards ease-out
.
This is invalid and will will fall back to style="animation: 0s ease 0s 1 normal none running none;"
(a none style).
I've resolved that for now by applying 0.5s
delay by default
The element that receives the animation is the section not the square
entry.target
is actually the parent section element and not the square you're trying to animate.
This can be resolved by selecting the square like:
entry.target.querySelector('.square')
and applying the animation to that.
Example
const sections = document.querySelectorAll('.section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
const elem = entry.target.querySelector('.square')
if (!!elem) {
entry.target.querySelector('.square').style.animation = `square-animation 2s 0.5s forwards ease-out`;
}
} else {
const elem = entry.target.querySelector('.square')
if (!!elem) {
entry.target.querySelector('.square').style.animation = 'none';
}
}
})
})
sections.forEach(section => {
observer.observe(section)
})
.section {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
.section.one {
background-color: rgb(6, 245, 245);
}
.section.two {
background-color: rgb(0, 149, 255);
}
.section.three {
background-color: rgb(112, 46, 46);
}
.section.four {
background-color: rgb(157, 115, 160);
}
.square {
width: 200px;
height: 200px;
border-radius: 20px;
background: orange;
}
@keyframes square-animation {
0% {
transform: scale(0, 0.025);
}
50% {
transform: scale(1, 0.025);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="fullpage">
<div class="section one">Section One </div>
<div class="section two">Section two
<div class="square"></div>
</div>
<div class="section three">Section Three</div>
<div class="section four">Section Four</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.js" integrity="sha512-ojnoeSkK5NDwnuW5S0ZnddobHez8Bx1yVa3RE+Cd0fGEuY/NEd4sgVF/CJ6eDtnOeLZLbTJpNFrCkUYbHS2hRA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>"
<script src="fullpage.js"></script>
</body>
</html>
Answered By - Lars
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.