After creating a page split into two parts like in this video https://www.youtube.com/watch?v=jvbL-VqACyM, I added scroll-snap-type: y mandatory; for the page to automatically scroll to a given section.
The problem is that when it scrolls to the second section, then back to the first, a white box appears above the element that is the trigger element for a while.
I put a movie on my google drive. You can see the error in the top right corner. https://drive.google.com/drive/folders/19fkSqCsJF1mHE1ju4fS4mqtJ_tABj6B3?usp=sharing
My code:
<!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">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="two_parts">
<div id="left_side">
<section class="scroll">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem magnam eaque recusandae error officia? Porro dolorem quas provident. Aliquid optio ut natus illo, rem dignissimos explicabo quas deserunt dolor vitae?
</section>
<section class="scroll">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti, soluta. Dolor nihil animi quaerat qui totam? Provident, quidem deserunt dolore ab, quos, voluptatibus cum fugiat officia unde atque repellat deleniti.
</section>
</div>
<div id="right_side" class="right_side">
<section>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut quidem minima deleniti quisquam vel autem quaerat animi laboriosam nemo amet? Officia repellendus iure architecto at sed minima, sint quidem illo?
</section>
</div>
</div>
<div style="width: 100vw-10px; height: 100vh; background-color: aqua; position: relative;"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script>
function splitScroll(){
const controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({
duration: '100%',
triggerElement: '.right_side',
triggerHook: 0,
container: '#right_side',
})
.setPin('.right_side')
.addIndicators()
.addTo(controller);
}
splitScroll();
</script>
</body>
</html>
body {
overflow: hidden;
height: 100vh;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
position: relative;
overflow-y: scroll;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
.scroll {
scroll-snap-align: center;
}
#two_parts {
height: 200vh;
display: flex;
}
#left_side {
width: 70%;
}
#left_side section {
height: 100vh;
background-color: #f2f0fb;
}
#right_side {
height: 100vh;
width: 30%;
margin: 0 !important;
top: 0px !important;
background-image: linear-gradient(#3728a5, #7b4cbb);
}
#right_side section {
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
background-image: linear-gradient(#3728a5, #7b4cbb);
}