Как я могу получить на веб-сайте студии Wix эффект раскрытия текста? ⇐ CSS

[Anonymous]

Здесь я использую HTML, чтобы показать эффект раскрытия текста, как на веб-сайте студии Wix https://www.wix.com/studio.
Скажите, пожалуйста, как мне добиться небольшой горизонтальной прокрутки при прокрутке раздела имеющий эффект раскрытия текста. Ниже приведен весь код.

Код: Выделить всё

Text Reveal Effect with Clip-Path

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;
}
}







Your Headline Here
Another Headline Here
This is a para
This is a para






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!

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!

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!

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!

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!

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!


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 

Подробнее здесь: [url]https://stackoverflow.com/questions/78521169/how-can-i-get-wix-studio-website-like-text-reveal-effect[/url]