I'm just wondering if I can get a horizontal smooth scroll snap in somewhere between the vertical scroll snap?
This one is what I'm working with so far - https://codepen.io/tarunpatnayak/pen/rNYvvQb
I'm trying to include something like this in between the vertical scroll - https://codepen.io/tarunpatnayak/pen/OJOQXwp
Can someone please help me achieving this?
gsap.registerPlugin(ScrollTrigger);
gsap.registerPlugin(ScrollToPlugin);
let sections = gsap.utils.toArray(".panel");
function goToSection(i) {
gsap.to(window, {
scrollTo: {
y: i * innerHeight,
autoKill: false,
ease: "Power3.easeInOut"
},
duration: 0.85
});
}
ScrollTrigger.defaults({
// markers: true
});
sections.forEach((eachPanel, i) => {
// const mainAnim = gsap.timeline({ paused: true });
ScrollTrigger.create({
trigger: eachPanel,
onEnter: () => goToSection(i)
});
ScrollTrigger.create({
trigger: eachPanel,
start: "bottom bottom",
onEnterBack: () => goToSection(i)
});
});* {
box-sizing: border-box;
font-family: sans-serif;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.panel {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.panel p {
font-size: 6vw;
}
.red {
background: red;
}
.blue {
background: blue;
}
.green {
background: green;
}
.orange {
background: orange;
}<section class="panel red">
<p>This is page 1</p>
</section>
<section class="panel green">
<p>This is page 2</p>
</section>
<section class="panel blue">
<p>This is page 3</p>
</section>
<section class="panel orange">
<p>This is page 4</p>
</section>
<section class="panel red">
<p>This is page 5</p>
</section>
<section class="panel green">
<p>This is page 6</p>
</section>
<section class="panel blue">
<p>This is page 7</p>
</section>
<section class="panel orange">
<p>This is page 8</p>
</section>