animations / add GSAP package

2024-05-04 19:55:34 +03:30
parent 10a012ec8e
commit 839a085e55
8 changed files with 606 additions and 96 deletions
@@ -1,30 +1,256 @@
 <template>
-  <div class="relative h-[97.436vw] md:h-[45.938vw] flex flex-col items-center">
-    <Carousel :autoplay="2000" :wrap-around="true" paginationColor="gray" paginationActiveColor="red">>
-        <Slide v-for="slide in 3" :key="slide">
-          <div class="carousel__item">{{ slide }}</div>
-        </Slide>
-    
-        <template #addons>
-          <Pagination />
-        </template>
-      </Carousel>
-  </div>
+  <div ref="main" class="scroller relative h-[1000px]">
+    <section class="orange">
+      <div class="text">This is some text inside of a div block.</div>
+    </section>

+    <section class="black">
+      <div class="text-wrap">
+        <div class="panel-text blue-text">Blue</div>
+        <div class="panel-text red-text">Red</div>
+        <div class="panel-text orange-text">Orange</div>
+        <div class="panel-text purple-text">Purple</div>
+      </div>
+
+      <div class="p-wrap">
+        <div class="panel blue"></div>
+        <div class="panel red"></div>
+        <div class="panel orange"></div>
+        <div class="panel purple"></div>
+      </div>
+    </section>
+
+    <section class="blue"></section>
+  </div>
 </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, Scrollbar);

+const main = ref();
+let ctx;
+
+onMounted(() => {
+
+        let bodyScrollBar = Scrollbar.init(document.body, {
+          damping: 0.1,
+          delegateTo: document,
+        });
+        
+ 
+  ScrollTrigger.scrollerProxy(".scroller", {
+    scrollTop(value) {
+      if (arguments.length) {
+        bodyScrollBar.scrollTop = value;
+      }
+      return bodyScrollBar.scrollTop;
+    },
+  });
+  bodyScrollBar.addListener(ScrollTrigger.update);
+
+  gsap.set(".panel", { zIndex: (i, target, targets) => targets.length - i });
+
+  var images = gsap.utils.toArray(".panel:not(.purple)");
+
+  images.forEach((image, i) => {
+    var tl = gsap.timeline({
+      scrollTrigger: {
+        trigger: "section.black",
+        scroller: ".scroller",
+        start: () => "top -" + window.innerHeight * (i + 0.5),
+        end: () => "+=" + window.innerHeight,
+        scrub: true,
+        toggleActions: "play none reverse none",
+        invalidateOnRefresh: true,
+      },
+    });
+
+    tl.to(image, { height: 0 });
+  });
+
+  gsap.set(".panel-text", {
+    zIndex: (i, target, targets) => targets.length - i,
+  });
+
+  var texts = gsap.utils.toArray(".panel-text");
+
+  texts.forEach((text, i) => {
+    var tl = gsap.timeline({
+      scrollTrigger: {
+        trigger: "section.black",
+        scroller: ".scroller",
+        start: () => "top -" + window.innerHeight * i,
+        end: () => "+=" + window.innerHeight,
+        scrub: true,
+        toggleActions: "play none reverse none",
+        invalidateOnRefresh: true,
+      },
+    });
+
+    tl.to(text, { duration: 0.33, opacity: 1, y: "50%" }).to(
+      text,
+      { duration: 0.33, opacity: 0, y: "0%" },
+      0.66
+    );
+  });
+
+  ScrollTrigger.create({
+    trigger: "section.black",
+    scroller: ".scroller",
+    scrub: true,
+    markers: true,
+    pin: true,
+    start: () => "top top",
+    end: () => "+=" + (images.length + 1) * window.innerHeight,
+    invalidateOnRefresh: true,
+  });
+});
 </script>

-
-
-
-
-
 <style scoped>
-</style>
+body,
+html {
+  margin: 0;
+}
+.scroller {
+  height: 100vh;
+}

+.orange {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100vh;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #753500;
+}
+
+.text {
+  color: #fff;
+}
+
+.black {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100vh;
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: distribute;
+  justify-content: space-around;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #070707;
+}
+
+.blue {
+  height: 100vh;
+  background-color: #00026d;
+}
+
+.text-wrap {
+  position: relative;
+  overflow: hidden;
+  width: 450px;
+  height: 80vh;
+}
+
+.panel-text {
+  position: absolute;
+  left: 0%;
+  top: 0%;
+  right: 0%;
+  bottom: 0%;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  font-size: 40px;
+  text-transform: uppercase;
+  font-weight: 900;
+  text-align: center;
+  background-color: #070707;
+
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.panel-text.blue-text {
+  color: blue;
+}
+
+.panel-text.red-text {
+  color: red;
+}
+
+.panel-text.purple-text {
+  color: purple;
+}
+
+.panel-text.orange-text {
+  color: orange;
+}
+
+.p-wrap {
+  position: relative;
+  overflow: hidden;
+  width: 450px;
+  height: 80vh;
+}
+
+.panel {
+  position: absolute;
+  left: 0%;
+  top: 0%;
+  right: 0%;
+  bottom: 0%;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  background-image: url("../images/5ed12171d9d512cb2feead83_5.jpg");
+  background-position: 50% 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.panel._2 {
+  z-index: 1;
+  background-image: url("../images/5f5a5b3515c4dd0c2c455925_110642301_938622823267359_7859124022958180678_n201.jpg");
+}
+
+.panel.blue {
+  z-index: auto;
+}
+
+.panel.red {
+  z-index: auto;
+  background-color: red;
+  background-image: none;
+}
+
+.panel.orange {
+  z-index: auto;
+  background-color: #cf5d00;
+  background-image: none;
+}
+
+.panel.purple {
+  z-index: auto;
+  background-color: #808;
+  background-image: none;
+}
+</style>