<p>Add a <code>data-speed</code> attribute to any element. 1 = normal scroll speed, 0 = no movement, 0.5 = half-speed, etc.</p>

<div class="box-container">
	<div class="box green" data-speed="0.25">0.25</div>
	<div class="box purple" data-speed="0.4">0.4</div>
	<div class="box orange" data-speed="0">0</div>
	<div class="box red" data-speed="1">1</div>
	<div class="box blue" data-speed="0.75">0.75</div>
</div>

/* this pen has external styles in the settings panel */

* {
  box-sizing: border-box;
}

button {
  cursor: pointer;
  padding: 8px 16px;
  margin: 10px 5px;
}

body {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300vh;
}

.box-container {
  top: 50vh;
  position: relative;
  display: flex;
  justify-content: center;
  flex: 1;
  width: 100%;
  overflow: visible;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 15%;
  margin: 10px;
}

code {
  padding:0.5rem;
}

gsap.registerPlugin(ScrollTrigger);

// apply parallax effect to any element with a data-speed attribute
gsap.to("[data-speed]", {
  y: (i, el) => (1 - parseFloat(el.getAttribute("data-speed"))) * ScrollTrigger.maxScroll(window) ,
  ease: "none",
  scrollTrigger: {
    start: 0,
    end: "max",
    invalidateOnRefresh: true,
    scrub: 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/"});
// 💚 Happy tweening!