Geniales GSAP Scroll-Feature: Vertikal → Horizontal → Vertikal

Habt ihr euch schon mal gefragt wie man es hinbekommt, dass wenn man auf der Maus nach unten scrollt man am Bildschirm aber seitwärts verschiebt (seitwärts-scrollt) und erst später wieder weiter nach unten kommt? So eine Art Zick Zack Scrolling?

Mit so einem Effekt kann man den Webseitenbesucher ziemlich überraschen.

Heute zeige ich euch wie es geht.

Video

HTML

<div class="sektion1">
    <h2>hello</h2>
</div>   

<div class="container">
    <div class="elemente">
        <h3>Apfel</h3>
        <img src="https://placehold.co/500x300" alt="Platzhalterbild">
        <h3>Brot</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, dolorem.</p>
        <h3>Weizenmehl</h3>
        <img src="https://placehold.co/500x300" alt="Platzhalterbild">
        <h3>Eis</h3>
        <h3>Karotte</h3>
        <img src="https://placehold.co/500x300" alt="Platzhalterbild">
    </div>
</div>

<div class="sektion3">
    <h2>Hoffe es hat dir gefallen</h2>
</div>

CSS

html, body {
    overflow-x: hidden; 
    width: 100vw; 
}

body {
    background-color: #f3f3f3;
}

.sektion1 {
    background-color: #4deaff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-y: hidden;
}
.sektion3 {
    background-color: #4d50ff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-y: hidden;
}


.elemente {
    width: fit-content;
    display:flex;
    flex-wrap: nowrap;
    
}

.elemente h3 {
    
    font-size: 30vw;
    flex-shrink: 0;
    padding-right:0.3em;
	padding-left:0.3em;
	color:#fff;
}

.pin-spacer {
    background-color: #000;
}

p {
    color: green;
    width: 1500px;
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

GSAP

Zuert müsst ihr natürlich noch zuerst GSAP und ScrollTrigger im Head verlinken

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

Und dann kommt der GSAP Code:

gsap.registerPlugin(ScrollTrigger);

const elemente = document.querySelector(".elemente")


function getScrollMenge(){
  let elementeBreite = elemente.scrollWidth;
  return -(elementeBreite - window.innerWidth);
}

const breite = gsap.to(elemente, {
  x: getScrollMenge,
  duration: 3,
  ease: "none",
});

ScrollTrigger.create({
  trigger: ".container",
  start: "top 20%",
  end: () => `+=${getScrollMenge() * -1}`,
	pin:true,
	animation:breite,
	scrub:1,
	invalidateOnRefresh:true,
	markers:true
});