#wrap
 #panels
  %section.panel
   %h1{"data-splitting" => "words"} Holy Moly Stromboli
   .image
    .inner
   .image.right
    .inner
   .image
    .inner
  %section.panel
   %h1{"data-splitting" => "words"} Welcome to Flavortown
   .image
    .inner
   .image.right
    .inner
   .image
    .inner
  %section.panel
   %h1{"data-splitting" => "words"} I’ve Been Stricken by Chicken
   .image
    .inner
   .image.right
    .inner
   .image
    .inner
  %section.panel
   %h1{"data-splitting" => "words"} Peace, Love and Taco Grease
   .image
    .inner
   .image.right
    .inner
   .image
    .inner
  %section.panel
   %h1{"data-splitting" => "words"} That’ll Do, Donkey That’ll Do
   .image
    .inner
   .image.right
    .inner
   .image
    .inner
  %section.panel
   %h1{"data-splitting" => "words"} Tastes Really Funky, It’s Funkalicious
   .image
    .inner
   .image.right
    .inner
   .image
    .inner
  %section.panel
   %h1{"data-splitting" => "words"} It's a Festival of Funk
   .image
    .inner
   .image.right
    .inner
   .image
    .inner
  %section.panel
   %h1{"data-splitting" => "words"} Serve It on a Trashcan Lid
   .image
    .inner
   .image.right
    .inner
   .image
    .inner
  %section.panel
   %h1{"data-splitting" => "words"} Shut the Front Door
   .image
    .inner
   .image.right
    .inner
   .image
    .inner
  %section.panel
   %h1{"data-splitting" => "words"} Bomb Dot Com Tasty
   .image
    .inner
   .image.right
    .inner
   .image
    .inner
  #backgrounds
   -10.times do
    .bg
View Compiled
body{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  height:auto;
  flex-wrap:wrap;
  --pink: #F1A6BD;
  --cream: #FDFCEA;
  --green: #1F4339;
  --blue: #3975B3;
  --orange: #E77553;
  --delay: 0s;
  background:var(--pink);
}

body.loaded{
  #backgrounds{
    width:1000vw;
    height:100%;
    position:fixed;
    z-index:-1;
    top:0;
    left:0;
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    transform:translateX(calc(var(--total) * -1%)) skewX(calc(var(--velocity) * 5deg));
    .bg{
      display:flex;
      height:100vh;
      width:100vw;
      background:var(--pink);
      overflow:visible;
      position:relative;
      &:before{
        content:'';
        position:absolute;
        width:100%;
        height:100%;
        z-index:2;
        top:0;
        left:100%;
        background:var(--cream);
        transform:scaleX(calc(var(--posvelocity)));
        transform-origin:left;
      }
      @for $i from 1 through 10{
        &:nth-of-type(#{$i}){
          z-index:#{11 - $i};
        }
      }
      &:nth-of-type(2n){
        background:var(--cream);
        &:before{
          background:var(--green);
        }
      }
      &:nth-of-type(3n){
        background:var(--orange);
        &:before{
          background:var(--blue);
        }
      }
    }
  }
  #wrap{
    width:calc(100% - 32px);
    max-width:1200px;
    position:relative;
    z-index:1;
    #panels{
      width:100%;
      height:1000vh;
      section.panel{
        width:100%;
        height:100vh;
        position:relative;
        box-sizing:border-box;
        margin-bottom:0vh;
        .image{
          transition:transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
          &:before{
            transition:transform 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
          }
          .inner{
            transform:translateY(125%);
            transition:1s cubic-bezier(0.645, 0.045, 0.355, 1);
          }
        }
        &:nth-of-type(2n){
          h1{
            span.word{
              &:before{
                
              background-image:linear-gradient(to top, var(--green) 50%, var(--orange) 50%, var(--orange) 75%, var(--cream) 75%);
              }
            }
          }
        }
        &:nth-of-type(3n){
          .image.right{
            width:40vh;
          }
          h1{
            span.word{
              &:before{ 
              background-image:linear-gradient(to top, var(--green) 50%, var(--cream) 50%, var(--cream) 75%, var(--pink) 75%);
              }
            }
          }
        }
        &:nth-of-type(4n){
          .image{
            &:first-of-type{
              width:40vh;
            }
          }
        }
        &.active{
          .image{        
            @for $i from 1 through 3{
              &:nth-of-type(#{$i}){
                  transition-delay:#{($i/2.5) + 0.75}s;
                  transform:scaleY(1);
                 &:before{
                  transition-delay:#{($i/2.5) + 1.5}s;
                  transform:scaleY(0);
                }
              }
            }
            .inner{
              transform:translateY(0);
            }
          }
        }
        &.active{
          ~ section.panel{
            .image{
              transform-origin:top;
              transform:scaleY(0);
              transition:transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
              transition-delay:0.5s;
              &:before{
                transform-origin:bottom;
                transform:scaleY(1);
                transition:transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
              }
              .inner{
                transform:translateY(125%);
              }
            }
            h1{
              span{
                &:nth-of-type(3n){
                  &:before, &:after{
                    transform:translateX(-50%) translateY(-200%);
                  }
                }
                &:before, &:after{
                  transform:translateX(-50%) translateY(200%);
                  background-position:0% 100%;
                }
              }
            }
          }
          h1{
            font-family:"Shrikhand", serif;
            font-weight:100;
            span.word{
              &:before{
                transform:translateX(-50%) translateY(-50%);
                background-position:0% 17.5%;
                transition-delay:calc(((var(--word-index)) * 0.15s) + var(--delay) + 1.5s), calc(((var(--word-index)) * 0.15s) + var(--delay) + 1.75s);
              }
            }
          }
        }
        h1{
          position:absolute;
          left:50%;
          top:50%;
          font-size:12vmin;
          z-index:9;
          transform:translate(-50%, -50%);
          margin:0px;
          line-height:10vmin;
          width:70vmin;
          span.word{
            padding:1vmin 10px;
            display:inline-block;
            overflow:hidden;
            margin:-1vmin 0;
            position:relative;
            color:transparent;
            &:before{
              content:attr(data-word);
              color:var(--green);
              position:absolute;
              transform:translateX(-50%) translateY(175%);
              transition:transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), background-position 1s cubic-bezier(0.645, 0.045, 0.355, 1);
              -webkit-text-stroke:2px var(--green);
              -webkit-text-fill-color: transparent;
              -webkit-background-clip: text;
              background-image:linear-gradient(to top, var(--green) 50%, var(--cream) 50%, var(--cream) 75%, var(--pink) 75%);
              background-size:450% 450%;
              background-position:0% 100%;
              padding:1vmin 20px;
              top:50%;
              left:50%;
            }
          }
        }
        &:nth-of-type(even){
          transform:scaleX(-1);
          h1{
            transform:translate(-50%, -50%) scaleX(-1);
          }
        }
        @for $i from 1 through 10{
          &:nth-of-type(#{$i}){
            .image{
             transform:scaleY(0);
              @for $j from 1 through 3{
                &:nth-of-type(#{$j}){
                  .inner{
                    &:before{
                      background:url('https://assets.codepen.io/383755/fieri#{$i + $j}.jpg') center / cover;
                      opacity:0.5;
                    }
                  }
                }
              }
            }
          }
        }
        .image{
          width:30vh;
          height:30vh;
          position:absolute;
          overflow:hidden;
          top:5vh;
          left:10vh;
          z-index:3;
          box-sizing:border-box;
          transform-origin:bottom;
          &:before{
            content:'';
            position:absolute;
            width:100%;
            height:100%;
            left:0;
            top:0;
            background:var(--blue);
            transform-origin:top;
          }
          *{
            box-sizing:border-box;
          }
          &:nth-of-type(2){
            top:auto;
            bottom:7.5vh;
            right:10vh;
            left:auto;
            height:50vh;
            &:before{
              background:var(--green);
            }
          }
          &:nth-of-type(3){
            top:auto;
            bottom:5vh;
            left:15vh;
          }
          .inner{
            position:absolute;
            width:calc(100% - 5px);
            height:calc(100% - 5px);
            left:2.5px;
            top:2.5px;
            z-index:-1;
            background:var(--green);
            &:after{
              content:'';
              position:absolute;
              width:100%;
              height:100%;
              left:0px;
              top:0px;
              z-index:1;
              background:var(--cream);
              mix-blend-mode:darken;
            }
            &:before{
              content:'';
              position:absolute;
              width:100%;
              height:100%;
              left:0px;
              top:0px;
              z-index:2;
              filter:saturate(0) contrast(2);
              mix-blend-mode:lighten;
            }
          }
        }
      }
    }
  }
}
View Compiled
Splitting();
document.addEventListener("DOMContentLoaded", function() { gsap.registerPlugin(ScrollTrigger);
                                                           $('body').addClass("loaded");
  gsap.utils.toArray("section").forEach(function(elem) {
    ScrollTrigger.create({
      trigger: elem,
      onEnter: function() { $(elem).addClass('active') },
      onEnterBack: function() { $(elem).addClass('active') },
      onLeave: function () { $(elem).removeClass("active")},
onLeaveBack: function () { $(elem).removeClass("active")}

    });
  });
 function slideIn(elem){                                    gsap.fromTo(elem,  {
            y: "150%",
            scale: 1,
            duration: 1.5,
            stagger: 1.5,
            overwrite: "auto",
            delay:0,
          },
          {
            y: "0%",
            scale: 1,
            duration: 1.75,
            stagger: 1.5,
            delay:1,
            overwrite: "auto",
            ease: "power4.inOut"
          });
}
  
  ScrollTrigger.create({
  trigger: document.body,
  end: "bottom bottom",
  snap: {snapTo: 0.1, duration: 0.6, delay: 0, ease: "power4.inOut"},
    onUpdate: (self) => {
    const totalVelocity = (self.getVelocity()/1400);
    const posVelocity = Math.abs((self.getVelocity()/2400));
    const totalScroll = (((self.progress - 0.1) * 100));
    gsap.to("html", {"--velocity": totalVelocity, duration: 0.5});
    gsap.to("html", {"--posvelocity": posVelocity, duration: 0.5});
      gsap.to("html", {"--total": totalScroll, duration: 0.05, onComplete: () => {
      gsap.to("html", {"--velocity": 0, "--posvelocity": 0, duration: 0.5, overwrite: "auto"})
    }});
  },
 });  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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