Здравствуйте. Помогите пожалуйста решить проблему с горизонтальным скроллом текста. У меня на сайте есть текст обернут в класс ‘.zenno__slider-slide’, который не умещается на экран полностью. При скролле вниз, он скролится справа налево, и только когда он полностью скрывается, пользователь получает возможность скролить вниз. Только проблема в том, что если пользователь скроллит страницу быстро, текст не успевает скроллится и этот момент не срабатывает. Также по дизайну надпись scroll down должна быть расположена почти вплотную к этому тексту, но я его не могу к нему подвинуть вплотную из-за элемента с классом ‘.pin-spacer’. В целом сам скрипт работает как-то странно, иногда с багами. Реализовал я его при помощи GSAP и ScrollTrigger. Помогите пожалуйста решить проблему. Может кто-то может предложить другое решение для этого функционала. Буду рад любой помощи. Внизу оставляю код, чтобы можно было посмотреть. Спасибо заранее)
<section class="zenno" id="zenno">
<div class="zenno__slider-wrapper">
<div class="zenno__slider-slide">
<p>Our name <strong> “Zenno” </strong> comes from a Japanese word <strong> “zennou” </strong> which
means:
almighty
or
omnipotent</p>
</div>
<div class="zenno__slider-slide"></div>
</div>
<div class="zenno__container-subtitle wow animate__animated
animate__fadeInDown">
<p>Scroll Down</p>
<img src="img/arrow_down.svg" alt="arrow_down" width="16" height="25">
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/ScrollTrigger.min.js"></script>
.zenno {
overflow-x: hidden;
}
.zenno__slider-wrapper {
width: 400%;
display: flex;
flex-direction: row;
align-items: center;
white-space: nowrap;
overflow-x: hidden;
}
.zenno__slider-slide {
line-height: 50vh;
width: 500%;
margin-left: 10rem;
overflow: hidden;
}
.zenno__slider-slide p {
font-size: 64px;
}
.zenno__container-subtitle {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.625rem;
}
gsap.registerPlugin(ScrollTrigger);
let sections = gsap.utils.toArray(".zenno__slider-slide");
gsap.to(sections, {
xPercent: -200 * (sections.length - 1),
ease: "none",
scrollTrigger: {
trigger: ".zenno__slider-wrapper",
pin: ".zenno",
pinSpacing: true,
scrub: 20,
end: "+=1000",
},
});
