Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="container">
  <div class="description panel blue">
    <div class="scroll-down">Scroll down<div class="arrow"></div>
    </div>
  </div>
  <section class="panel red panel-one">
    <div>
      ONE
    </div>
  </section>
  <section class="panel orange panel-two">
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat velit scelerisque in dictum non. Viverra nibh cras pulvinar mattis. Semper quis lectus nulla at volutpat diam. Amet massa vitae tortor condimentum lacinia. Risus quis varius quam quisque id diam. A arcu cursus vitae congue mauris rhoncus aenean vel elit. Duis ut diam quam nulla porttitor massa id neque. Sagittis vitae et leo duis ut diam quam nulla. A arcu cursus vitae congue mauris rhoncus aenean vel. Orci dapibus ultrices in iaculis nunc sed augue.

      Quisque id diam vel quam elementum pulvinar etiam non quam. Faucibus a pellentesque sit amet. Pulvinar mattis nunc sed blandit. Volutpat consequat mauris nunc congue nisi vitae suscipit. Curabitur vitae nunc sed velit. Sem integer vitae justo eget magna fermentum iaculis. Arcu non sodales neque sodales ut. Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam. Vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Sociis natoque penatibus et magnis dis parturient. Bibendum at varius vel pharetra vel turpis nunc eget. Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque. Sagittis aliquam malesuada bibendum arcu. Purus ut faucibus pulvinar elementum integer enim neque. Orci sagittis eu volutpat odio facilisis mauris. Rutrum quisque non tellus orci ac auctor. Congue eu consequat ac felis donec et odio pellentesque. Auctor eu augue ut lectus arcu bibendum at varius vel. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam.

      Sem integer vitae justo eget magna fermentum iaculis eu non. Justo donec enim diam vulputate ut. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Magna etiam tempor orci eu lobortis. Mauris nunc congue nisi vitae suscipit tellus. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Massa tincidunt dui ut ornare. Amet consectetur adipiscing elit duis tristique. Feugiat scelerisque varius morbi enim nunc. Massa enim nec dui nunc. Sed felis eget velit aliquet sagittis id consectetur purus. Quis lectus nulla at volutpat diam. Sit amet tellus cras adipiscing enim. Molestie at elementum eu facilisis sed odio morbi.

      Nunc scelerisque viverra mauris in aliquam sem fringilla. Egestas pretium aenean pharetra magna. Amet cursus sit amet dictum sit. Nibh ipsum consequat nisl vel pretium. Id velit ut tortor pretium viverra suspendisse potenti. Nisl vel pretium lectus quam id leo in vitae turpis. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Aenean euismod elementum nisi quis eleifend quam. Nisi est sit amet facilisis magna etiam. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla.

      Nulla aliquet porttitor lacus luctus accumsan tortor. Nisl nisi scelerisque eu ultrices vitae. Hac habitasse platea dictumst quisque. Imperdiet proin fermentum leo vel orci porta non. Gravida quis blandit turpis cursus in hac habitasse platea. Urna condimentum mattis pellentesque id nibh tortor id aliquet lectus. Egestas erat imperdiet sed euismod nisi porta lorem mollis. Euismod in pellentesque massa placerat duis ultricies. Sit amet tellus cras adipiscing enim eu. Morbi tempus iaculis urna id. Sed enim ut sem viverra aliquet eget sit amet tellus. Laoreet suspendisse interdum consectetur libero id faucibus. Leo vel orci porta non. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat velit scelerisque in dictum non. Viverra nibh cras pulvinar mattis. Semper quis lectus nulla at volutpat diam. Amet massa vitae tortor condimentum lacinia. Risus quis varius quam quisque id diam. A arcu cursus vitae congue mauris rhoncus aenean vel elit. Duis ut diam quam nulla porttitor massa id neque. Sagittis vitae et leo duis ut diam quam nulla. A arcu cursus vitae congue mauris rhoncus aenean vel. Orci dapibus ultrices in iaculis nunc sed augue.

      Quisque id diam vel quam elementum pulvinar etiam non quam. Faucibus a pellentesque sit amet. Pulvinar mattis nunc sed blandit. Volutpat consequat mauris nunc congue nisi vitae suscipit. Curabitur vitae nunc sed velit. Sem integer vitae justo eget magna fermentum iaculis. Arcu non sodales neque sodales ut. Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam. Vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Sociis natoque penatibus et magnis dis parturient. Bibendum at varius vel pharetra vel turpis nunc eget. Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque. Sagittis aliquam malesuada bibendum arcu. Purus ut faucibus pulvinar elementum integer enim neque. Orci sagittis eu volutpat odio facilisis mauris. Rutrum quisque non tellus orci ac auctor. Congue eu consequat ac felis donec et odio pellentesque. Auctor eu augue ut lectus arcu bibendum at varius vel. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam.

      Sem integer vitae justo eget magna fermentum iaculis eu non. Justo donec enim diam vulputate ut. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Magna etiam tempor orci eu lobortis. Mauris nunc congue nisi vitae suscipit tellus. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Massa tincidunt dui ut ornare. Amet consectetur adipiscing elit duis tristique. Feugiat scelerisque varius morbi enim nunc. Massa enim nec dui nunc. Sed felis eget velit aliquet sagittis id consectetur purus. Quis lectus nulla at volutpat diam. Sit amet tellus cras adipiscing enim. Molestie at elementum eu facilisis sed odio morbi.

      Nunc scelerisque viverra mauris in aliquam sem fringilla. Egestas pretium aenean pharetra magna. Amet cursus sit amet dictum sit. Nibh ipsum consequat nisl vel pretium. Id velit ut tortor pretium viverra suspendisse potenti. Nisl vel pretium lectus quam id leo in vitae turpis. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Aenean euismod elementum nisi quis eleifend quam. Nisi est sit amet facilisis magna etiam. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla.

      Nulla aliquet porttitor lacus luctus accumsan tortor. Nisl nisi scelerisque eu ultrices vitae. Hac habitasse platea dictumst quisque. Imperdiet proin fermentum leo vel orci porta non. Gravida quis blandit turpis cursus in hac habitasse platea. Urna condimentum mattis pellentesque id nibh tortor id aliquet lectus. Egestas erat imperdiet sed euismod nisi porta lorem mollis. Euismod in pellentesque massa placerat duis ultricies. Sit amet tellus cras adipiscing enim eu. Morbi tempus iaculis urna id. Sed enim ut sem viverra aliquet eget sit amet tellus. Laoreet suspendisse interdum consectetur libero id faucibus. Leo vel orci porta non. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat velit scelerisque in dictum non. Viverra nibh cras pulvinar mattis. Semper quis lectus nulla at volutpat diam. Amet massa vitae tortor condimentum lacinia. Risus quis varius quam quisque id diam. A arcu cursus vitae congue mauris rhoncus aenean vel elit. Duis ut diam quam nulla porttitor massa id neque. Sagittis vitae et leo duis ut diam quam nulla. A arcu cursus vitae congue mauris rhoncus aenean vel. Orci dapibus ultrices in iaculis nunc sed augue.

      Quisque id diam vel quam elementum pulvinar etiam non quam. Faucibus a pellentesque sit amet. Pulvinar mattis nunc sed blandit. Volutpat consequat mauris nunc congue nisi vitae suscipit. Curabitur vitae nunc sed velit. Sem integer vitae justo eget magna fermentum iaculis. Arcu non sodales neque sodales ut. Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam. Vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Sociis natoque penatibus et magnis dis parturient. Bibendum at varius vel pharetra vel turpis nunc eget. Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque. Sagittis aliquam malesuada bibendum arcu. Purus ut faucibus pulvinar elementum integer enim neque. Orci sagittis eu volutpat odio facilisis mauris. Rutrum quisque non tellus orci ac auctor. Congue eu consequat ac felis donec et odio pellentesque. Auctor eu augue ut lectus arcu bibendum at varius vel. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam.

      Sem integer vitae justo eget magna fermentum iaculis eu non. Justo donec enim diam vulputate ut. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Magna etiam tempor orci eu lobortis. Mauris nunc congue nisi vitae suscipit tellus. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Massa tincidunt dui ut ornare. Amet consectetur adipiscing elit duis tristique. Feugiat scelerisque varius morbi enim nunc. Massa enim nec dui nunc. Sed felis eget velit aliquet sagittis id consectetur purus. Quis lectus nulla at volutpat diam. Sit amet tellus cras adipiscing enim. Molestie at elementum eu facilisis sed odio morbi.

      Nunc scelerisque viverra mauris in aliquam sem fringilla. Egestas pretium aenean pharetra magna. Amet cursus sit amet dictum sit. Nibh ipsum consequat nisl vel pretium. Id velit ut tortor pretium viverra suspendisse potenti. Nisl vel pretium lectus quam id leo in vitae turpis. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Aenean euismod elementum nisi quis eleifend quam. Nisi est sit amet facilisis magna etiam. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla.

      Nulla aliquet porttitor lacus luctus accumsan tortor. Nisl nisi scelerisque eu ultrices vitae. Hac habitasse platea dictumst quisque. Imperdiet proin fermentum leo vel orci porta non. Gravida quis blandit turpis cursus in hac habitasse platea. Urna condimentum mattis pellentesque id nibh tortor id aliquet lectus. Egestas erat imperdiet sed euismod nisi porta lorem mollis. Euismod in pellentesque massa placerat duis ultricies. Sit amet tellus cras adipiscing enim eu. Morbi tempus iaculis urna id. Sed enim ut sem viverra aliquet eget sit amet tellus. Laoreet suspendisse interdum consectetur libero id faucibus. Leo vel orci porta non. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat velit scelerisque in dictum non. Viverra nibh cras pulvinar mattis. Semper quis lectus nulla at volutpat diam. Amet massa vitae tortor condimentum lacinia. Risus quis varius quam quisque id diam. A arcu cursus vitae congue mauris rhoncus aenean vel elit. Duis ut diam quam nulla porttitor massa id neque. Sagittis vitae et leo duis ut diam quam nulla. A arcu cursus vitae congue mauris rhoncus aenean vel. Orci dapibus ultrices in iaculis nunc sed augue.

      Quisque id diam vel quam elementum pulvinar etiam non quam. Faucibus a pellentesque sit amet. Pulvinar mattis nunc sed blandit. Volutpat consequat mauris nunc congue nisi vitae suscipit. Curabitur vitae nunc sed velit. Sem integer vitae justo eget magna fermentum iaculis. Arcu non sodales neque sodales ut. Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam. Vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Sociis natoque penatibus et magnis dis parturient. Bibendum at varius vel pharetra vel turpis nunc eget. Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque. Sagittis aliquam malesuada bibendum arcu. Purus ut faucibus pulvinar elementum integer enim neque. Orci sagittis eu volutpat odio facilisis mauris. Rutrum quisque non tellus orci ac auctor. Congue eu consequat ac felis donec et odio pellentesque. Auctor eu augue ut lectus arcu bibendum at varius vel. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam.

      Sem integer vitae justo eget magna fermentum iaculis eu non. Justo donec enim diam vulputate ut. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Magna etiam tempor orci eu lobortis. Mauris nunc congue nisi vitae suscipit tellus. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Massa tincidunt dui ut ornare. Amet consectetur adipiscing elit duis tristique. Feugiat scelerisque varius morbi enim nunc. Massa enim nec dui nunc. Sed felis eget velit aliquet sagittis id consectetur purus. Quis lectus nulla at volutpat diam. Sit amet tellus cras adipiscing enim. Molestie at elementum eu facilisis sed odio morbi.

      Nunc scelerisque viverra mauris in aliquam sem fringilla. Egestas pretium aenean pharetra magna. Amet cursus sit amet dictum sit. Nibh ipsum consequat nisl vel pretium. Id velit ut tortor pretium viverra suspendisse potenti. Nisl vel pretium lectus quam id leo in vitae turpis. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Aenean euismod elementum nisi quis eleifend quam. Nisi est sit amet facilisis magna etiam. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla.

      Nulla aliquet porttitor lacus luctus accumsan tortor. Nisl nisi scelerisque eu ultrices vitae. Hac habitasse platea dictumst quisque. Imperdiet proin fermentum leo vel orci porta non. Gravida quis blandit turpis cursus in hac habitasse platea. Urna condimentum mattis pellentesque id nibh tortor id aliquet lectus. Egestas erat imperdiet sed euismod nisi porta lorem mollis. Euismod in pellentesque massa placerat duis ultricies. Sit amet tellus cras adipiscing enim eu. Morbi tempus iaculis urna id. Sed enim ut sem viverra aliquet eget sit amet tellus. Laoreet suspendisse interdum consectetur libero id faucibus. Leo vel orci porta non. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed.
    </div>
  </section>
  <section class="panel purple panel-three">
    THREE
  </section>
</div>
              
            
!

CSS

              
                #container {
  width: 100%;
  height: 100%; 
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.panel {
  min-height: 100vh;
  width: 100%;
  background-color: white;
  border-top: solid 2px black;
  border-bottom: solid 2px red;
  height: auto;
  padding: 3rem 1rem;
  position: absolute;
  will-change: transform;
  display: flex;
  align-items: center;
  justify-contents: center;
}

.panel-two {
  background-color:black;
  color: white;
}

.panel-one {
  top: 85%;
}
.panel-two {
  top: 90%;
}
.panel-three {
  top: 95%;
}
              
            
!

JS

              
                gsap.registerPlugin(ScrollTrigger);

let panels = gsap.utils.toArray(".panel");
let h = window.innerHeight;

// work out the overall heights of the panels
let heights = [];
panels.forEach((section, index) => {
  // ignore first
  if(index == 0) return
  heights.push(section.offsetHeight);
});
let totalHeight = heights.reduce((a, b) => a + b, 0);

// scrolltrigger for the entire timeline
let tl = gsap.timeline({
  scrollTrigger: {
    trigger: "#container",
    start: "bottom bottom",
    end: `+=${totalHeight}`, // scroll by the right px amount
    scrub: true,
    pin: true,
    markers: true
  }
});

panels.forEach((panel, index) => {
  // ignore first
  if(index == 0) return
  // work out how many px it's poking up from the bottom so that they all move up by the right amount
  let offset = h - panel.offsetTop;
  
  // get the height of the panel in ralation to all the panels so we can make sure the scroll feels even overall
  let percentageHeight = (10 * panel.offsetHeight) / totalHeight;
  
  // animation biz
  tl.to(panel, {
  y: () => {
    return (panel.offsetHeight - offset) * -1;
  },
  duration: percentageHeight,
  ease: "none"
});
})
              
            
!
999px

Console