<h1 class="header-section">Scroll the slider to the right to see some parallax effects</h1>

<section class="horizSlider">
  <div class="slide">
    <h2 class="slideText">Text title</h2>
    <img width="1000" height="500" class="slideImage" src="https://picsum.photos/1000/500?random=1" alt="Filler image">
  </div>
  
  <div class="slide">
    <h2 class="slideText">Text title</h2>
    <img width="1000" height="500" class="slideImage" src="https://picsum.photos/1000/500?random=2" alt="Filler image">
  </div>
  
  <div class="slide">
    <h2 class="slideText">Text title</h2>
    <img width="1000" height="500" class="slideImage" src="https://picsum.photos/1000/500?random=3">
  </div>
  
  <div class="slide">
    <h2 class="slideText">Text title</h2>
    <img width="1000" height="500" class="slideImage" src="https://picsum.photos/1000/500?random=4">
  </div>
  
  <div class="slide">
    <h2 class="slideText">Text title</h2>
    <img width="1000" height="500" class="slideImage" src="https://picsum.photos/1000/500?random=5">
  </div>
</section>

<h1 class="header-section">How do you like the photos?</h1>

.horizSlider {
  position: relative;
  white-space: nowrap;
  overflow: auto;
}
.horizSlider .slide {
  display: inline-block;
  position: relative;
}
.slideText {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  text-shadow: 1px 1px 3px black;
  z-index: 1;
  font-size: 3em;
  font-weight: 400;
}
.slideImage {
  transform-origin: bottom left;
}

gsap.utils.toArray(".slideText").forEach(text => {
  gsap.timeline({
    defaults: {ease: "none"},
    scrollTrigger: {
      scroller: text.closest(".horizSlider"),
      horizontal: true,
      trigger: text.closest(".slide"),
      start: "left right",
      end: "left left",
      scrub: true
    }
  })
  .fromTo(text, {x: 250}, {x: -250}, 0)
  .from(text.nextElementSibling, {scale: 0.8}, 0)
});


// 💚 This just adds the GSAP link to this pen, don't copy this bit
import { GSAPInfoBar } from "https://codepen.io/GreenSock/pen/vYqpyLg.js"
new GSAPInfoBar({ link: "https://gsap.com/docs/v3/Plugins/ScrollTrigger/", position:'top'});
// 💚 Happy tweening!