Hey Guys
I'm having an issue with the horizontal scroll automatically playing through on page load. I need the horizontal scroll to start when the user starts the scroll.
Here is a live version of the build: https://syardv1.netlify.app/
Codepen: https://codepen.io/siplaster/pen/QWxgMMy
When you navigate to the hire page. It auto scrolls. Best to look on desktop atm. No mobile styling.
Here is my gsap animation:
let sections = gsap.utils.toArray(".panel");
let scrollTween = gsap.to(sections, {
xPercent: -100 * (sections.length - 1),
ease: "none", // <-- IMPORTANT!
scrollTrigger: {
trigger: ".horizontal-scroll-container",
pin: true,
scrub: 1,
end: "+=3000",
},
});
Here's a basic version of my html.
<div class="horizontal-scroll-container">
<section class="panel "> </section>
<section class="panel "> </section>
<section class="panel "> </section>
<section class="panel"> </section>
</div>
& my css
.horizontal-scroll-container {
/* This is the whole horizontal scroll container */
width: 400%;
height: 100vh;
display: flex;
flex-wrap: nowrap;
color: #fff;
}
.panel {
/* This is the indivisual pages to scroll through */
font-weight: 300;
width: 100vw;
height: 100vh;
display: flex;
flex: 0 0 100vw;
}
Help would be greatly appreciated.
Thanks
Simon