I am currently working on creating a unique section that transforms into a horizontal scroller once the items (in this case, images) are visible, and then reverts to a vertical scroller once all the items have been scrolled through.
My inspiration and adaptation for this approach came from the following demonstrations:
- Horizontal Scroll with GSAP
- ScrollTrigger - Horizontal Scrolling
The visual presentation I aim to achieve is displaying two images initially and then enabling scrolling to reveal the rest. Refer to the mockup below:
https://i.sstatic.net/zZjVq.png
This is my current approach:
$(function() {
let scroll_tl = gsap.timeline({
scrollTrigger: {
trigger: '.horizontalScroller__images',
start: "top center",
scrub: true,
end: "+=300",
}
});
var images = document.querySelectorAll('.horizontalScroller__item');
scroll_tl.to('.horizontalScroller__intro', {
duration: 1,
ease: "slow"
});
scroll_tl.to(images, {
xPercent: -85 * (images.length - 1),
scrollTrigger: {
trigger: ".horizontalScroller__images",
start: "center center",
pin: true,
markers: true,
scrub: 1,
snap: 1 / (images.length - 1),
}
});
});.spacer{
height: 300vh;
background: lightblue;
}
.horizontalScroller {
padding: 114px 0 80px 0;
height: 100vh;
position: relative;
background-color: #5d209f;
}
.horizontalScroller__intro {
margin-bottom: 25px;
color: #FFFFFF;
}
.horizontalScroller__header {
margin-bottom: 17px;
}
.horizontalScroller__images {
display: flex;
justify-content: center;
align-items: center;
}
.horizontalScroller__scroll {
position: relative;
overflow: hidden;
padding: 60px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bddfd2d2c9cec9cfdccdfd88938d938f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="spacer"> Scroll down </div>
<section class="horizontalScroller">
<div class="container">
<div class="row">
<div class="col-12 col-md-8 col-xl-6">
<div class="horizontalScroller__intro">
<h2 class="horizontalScroller__header">This is the header</h2>
<p class="horizontalScroller__standfirst mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
<div class="horizontalScroller__scroll">
<div class="horizontalScroller__images" id="horizontal-scroll">
<div class="horizontalScroller__item">
<img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
</div>
<div class="horizontalScroller__item">
<img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
</div>
<div class="horizontalScroller__item">
<img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
</div>
<div class="horizontalScroller__item">
<img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
</div>
</div>
</div>
</section>While testing the above demo, I noticed that the images initially move downward (which is not the intended behavior) before scrolling to the left (instead of right for horizontal scroll).
Additionally, in an attempt to display the two cards at the beginning, setting a width to the .horizontalScroller__item caused further issues.
If you have any insights on why my code is behaving in this manner, I'd appreciate your input.