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

<section class="pSection">
  <div class="container">
    <div class="pContent">
      <p>This is a super simple example of how to create a basic parallax effect using GSAP's ScrollTrigger!</p>
      <p>For more information about ScrollTrigger, check out <a href="https://greensock.com" target="_blank">the GreenSock website.</a></p>
    </div>
  </div>
  
  <img class="pImage" src="https://picsum.photos/1200/526?random=1" alt="Filler image">
</section>

a {
  color: #555;
  font-weight: 400;
}

.pSection {
  position: relative;
  padding-top: 200px;
  padding-bottom: 300px;
}

.container {
  padding: 20px;
  margin: 0 auto;
  max-width: 1070px;
  position: relative;
  z-index: 1;
}

.pContent {
  width: 65%;
  background-color: rgba(78,152,21,0.8);
  color: white;
  padding: 40px 60px;
}

.pImage {
  width: 70%;
  position: absolute;
  top: 0;
  right: 0;
  max-height: 900px;
}

gsap.to(".pContent", {
  yPercent: -100,
  ease: "none",
  scrollTrigger: {
    trigger: ".pSection",
    // start: "top bottom", // the default values
    // end: "bottom top",
    scrub: true
  }, 
});

gsap.to(".pImage", {
  yPercent: 50,
  ease: "none",
  scrollTrigger: {
    trigger: ".pSection",
    // start: "top bottom", // the default values
    // end: "bottom top",
    scrub: true
  }, 
});



// 💚 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/"});
// 💚 Happy tweening!