How can I get Wix studio website like stop while scrolling the section until the text reveal is complete?

[ParulSharma]

Here, I am using html to show text reveal effect like Wix studio website https://www.wix.com/studio.
Please tell me how can I achieve the slight stop in the horizontal scroll while I scroll the section having text reveal effect. Below is the entire code.

I did try the text reveal effect and that's happening but I am not able to achieve the slight stop in the vertical scroll for the section. I need help with stopping the vertical scroll of the section while the text reveals.


/ javascript part*/

const text1 = document.getElementById('text1');
const text2 = document.getElementById('text2');
const textContainer = document.querySelector('.text-container');

document.addEventListener('scroll', () => {
const scrollPosition = window.scrollY;
const containerHeight = textContainer.clientHeight;

if (scrollPosition > containerHeight * 0.3) {
text1.classList.add('reveal');
} else {
text1.classList.remove('reveal');
}

if (scrollPosition > containerHeight * 0.5) {
text2.classList.add('reveal');
} else {
text2.classList.remove('reveal');
}
});

function adjustMobileView() {
if (window.innerWidth <= 768) {
text1.classList.add('reveal');
text2.classList.add('reveal');
} else {
text1.classList.remove('reveal');
text2.classList.remove('reveal');
}
}

window.addEventListener('resize', adjustMobileView);
window.addEventListener('load', adjustMobileView);


/ css part*/
body,
html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

html {
display: grid;
}

body {
display: grid;
grid-area: 1 / 1 / 2 / 2;
}

section {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
height: 150vh;
display: flex;
justify-content: center;
flex-direction: column;
align-self: stretch;
justify-self: stretch;
grid-area: 1 / 1 / 2 / 2;
}

.container {
display: grid;
place-items: center;
width: 100%;
height: 100vh;
background: white;
overflow: hidden;
}

.text-container {
width: 100%;
display: grid;
justify-content: center;
align-items: center;
position: sticky;
height: 100vh;
margin: 0 0 5% 5%;
}

.text {
display: inline-block;
font-size: 100px;
font-weight: bold;
color: black;
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
transition: clip-path 1s ease-out;
}

.reveal {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.wrapper-content {
box-sizing: border-box;
display: grid;
grid-template-rows: max-content max-content max-content auto;
grid-template-columns: minmax(0px, 1852.5fr);
min-height: 0px;
height: auto;
width: 99.99976197212217%;
top: calc(var(--is-sticky) * (var(--top) + var(--sticky-offset)));
align-self: end;
justify-self: center;
position: relative;
margin-left: 0%;
margin-right: 0.0010881274414849572%;
margin-top: 0vh;
margin-bottom: 5%;
grid-area: 1/1/2/2;
}

@media (max-width: 768px) {
.text {
font-size: 40px;
}
}

/** html part*/

<section>
<div class="container">
<div class="text-container">
<div class="wrapper-content">
<div class="text" id="text1">Your Headline Here</div>
<div class="text" id="text2">Another Headline Here</div>
<p>This is a para</p>
<p>This is a para</p>
</div>

</div>
</div>
</section>
<div class="content">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium, fugiat deserunt ipsum et exercitationem minus aliquam omnis iusto! Molestiae doloremque modi aut provident? Iure dolores unde rem necessitatibus error vero!
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium, fugiat deserunt ipsum et exercitationem minus aliquam omnis iusto! Molestiae doloremque modi aut provident? Iure dolores unde rem necessitatibus error vero!
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium, fugiat deserunt ipsum et exercitationem minus aliquam omnis iusto! Molestiae doloremque modi aut provident? Iure dolores unde rem necessitatibus error vero!
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium, fugiat deserunt ipsum et exercitationem minus aliquam omnis iusto! Molestiae doloremque modi aut provident? Iure dolores unde rem necessitatibus error vero!
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium, fugiat deserunt ipsum et exercitationem minus aliquam omnis iusto! Molestiae doloremque modi aut provident? Iure dolores unde rem necessitatibus error vero!
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium, fugiat deserunt ipsum et exercitationem minus aliquam omnis iusto! Molestiae doloremque modi aut provident? Iure dolores unde rem necessitatibus error vero!
</p>
</div>

<!-- end snippet -->