javaneh/pages/test.vue

<template>
  <div class="description blue">
    <div>
      <h1>Side by Side Layered pinning</h1>
      <p>Use pinning to layer panels on top of each other as you scroll.</p>
      <div class="scroll-down">
        Scroll down
        <div class="arrow"></div>
      </div>
    </div>
  </div>

  <div class="sections">
    <div class="container-page">
      <div class="contento">
        <h2>This is random content</h2>
      </div>
      <div class="contento">
        <h2>This is another content</h2>
      </div>
    </div>
    <div class="panels">
      <section class="panel red">ONE</section>
      <section class="panel orange">TWO</section>
      <section class="panel purple">THREE</section>
      <section class="panel green">FOUR</section>
    </div>
  </div>

  <section class="spacer">
    <h1>The End!</h1>
    <h1>Happy Tweening!</h1>
  </section>

  <header>
    <a href="https://greensock.com/scrolltrigger">
      <img
        class="greensock-icon"
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg"
        width="200"
        height="64"
      />
    </a>
  </header>
</template>

<script setup>
// import { onMounted, onUnmounted, ref } from "vue";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
//  import {Scrollbar} from "gsap/Scrollbar"
// import { MotionPathPlugin } from "gsap/MotionPathPlugin";
gsap.registerPlugin(ScrollTrigger);

// const main = ref();
// let ctx;

onMounted(() => {
  console.clear();
  const panels = gsap.utils.toArray(".panel");
  console.log("panels :", panels);
  gsap.set(panels, {
    yPercent: (i) => (i ? 100 : 0),
  });
  
const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".sections",
    start: "top top",
    end: () => "+=" + 100 * panels.length + "%",
    pin: true,
    scrub: 1,
    markers: true
  }
});

panels.forEach((panel, index) => {
  if (index) {
    tl.to(
      panel,
      {
        yPercent: 0,
        ease: "none"
      },
      "+=0.25"
    );
  }
});

});
</script>

<style scoped>
.sections {
    width: 100%;
    position: relative;
    height: 90vh;
    display: flex;
  }
  .panels {
    width: 50%;
    /*   height: 100vh; */
    background: lime;
 
    position: relative;

  }
  .container-page {
    width: 50%;
    background-color: purple;
  }
  .container-page h2 {
    font-size: 30px;
  }
  .panel {
    height: 100vh;
    width: 100%;
    margin-bottom: 100px !important;
    margin-left: auto;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .description {
    height: 100vh;
  }
  
  .blue {
    background-color: blue;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }
  
  .blue h1 {
    margin: 0 0 1rem 0;
    text-align: center;
  }
  
  .green {
    height: 100vh;
  }

  section.spacer {
    width: 100%;
    height: 100vh;
    background: #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
  }
  
</style>