.container
  .section Hello World.
  .section Box Scroll Demo
  .section 
    i.fa.fa-birthday-cake
  .section 
    i.fa.fa-pizza-slice
  .section Fin.
View Compiled
$purple: rgb(154,138,242);
$green: rgb(168,214,112);
$blue: rgb(113,189,234);
$pink: rgb(230,119,142);
$yellow: rgb(249,220,103);

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Rubik', sans-serif;
}
%center{
  display: grid;
  place-items: center;
}
.container{
  
}
.section{
  min-height: 100vh;
  color: rgba(255,255,255,0.7);
  transform-style: preserve-3d;
  font-weight: 500;
  @extend %center;
  font-size: 48px;
  i{
    font-size: 64px;
  }
  
    &:nth-child(1){
      background-color: $purple;
      }
  &:nth-child(2){
      background-color: $green;
      }
  &:nth-child(3){
      background-color: $blue;
      }
  &:nth-child(4){
      background-color: $yellow;
      }
  &:nth-child(5){
      background-color: $pink;
      }
}
View Compiled

const sections = gsap.utils.toArray($(".section"));

sections.forEach((section, index) => {
  ScrollTrigger.create({
    trigger: section,
    start: "top top",
    toggleClass: "active",
    onUpdate: (self) => {
      $(sections).css({
        "transform":"none"
      })
      $(section).css({
            "transform-origin": "bottom center",
            "transform":`perspective(2000px) rotateX(${self.progress * 90}deg)`
          });
      const next = $(section).next();
      
      if(self.direction && next.length){
        $(next).css({
            "transform-origin": "top center",
            "transform":`perspective(2000px) rotateX(${(self.progress * 90) - 90}deg)`
          });
      }
    },
    snap: {
      snapTo: 1,
      duration: 1
    }
  })
})

/* Color Inspiration: 
https://dribbble.com/shots/10970419-Workly-Color-System

https://dribbble.com/sandhya_subram

*/
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=5426