scrollTrigger second section

2026-03-08 16:30:37 +01:00
parent 8c8568a4b5
commit 71de712741
5 changed files with 110 additions and 43 deletions
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>blog</title>
+    <title>th</title>
  </head>
  <body>
    <div id="app"></div>
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,32 @@
 <script setup lang="js">
+ import { onMounted, nextTick } from "vue"
+import gsap from "gsap"
+import ScrollTrigger from "gsap/ScrollTrigger"
+import ScrollSmoother from "gsap/ScrollSmoother"

+gsap.registerPlugin(ScrollTrigger, ScrollSmoother)
+
+onMounted(async () => {
+  await nextTick()
+
+  ScrollSmoother.create({
+    wrapper: "#smooth-wrapper",
+    content: "#smooth-content",
+    smooth: 0.2,
+    effects: true
+  })
+
+  ScrollTrigger.refresh()
+})

 </script>

 <template>
-  <router-view />
+  <div id="smooth-wrapper">
+    <div id="smooth-content">
+      <router-view />
+    </div>
+  </div>
 </template>

 <style>
--- a/src/components/sections/HeroSection.vue
+++ b/src/components/sections/HeroSection.vue
@@ -3,8 +3,6 @@ import { onMounted, onUnmounted, ref } from "vue"
 import gsap from "gsap"

 import ScrollTrigger from "gsap/ScrollTrigger"
-
-
 gsap.registerPlugin(ScrollTrigger)


@@ -38,9 +36,6 @@ function setBoxes() {
  });
 }

-
-
-
 function toggleTimeline() {
    tl.reversed(!tl.reversed())
 }
@@ -48,28 +43,28 @@ function startNextAnimation() {
  const centerX = window.innerWidth / 2
  const centerY = window.innerHeight / 2
  const radius = 250
+
  ctx = gsap.context(() => {
    const boxes = gsap.utils.toArray(".box")
    tl = gsap.timeline({
      scrollTrigger: {
-        trigger: ".scroll-trigger-ready__worm-wrap",
+
        start: "top top",
-        end: "bottom 35%",
-        scrub: 2,
-        pin: true
+        end: "+=100%",
+        scrub: true,
+        pin: true,
      }
    })

    tl.to(boxes, {
      y: () => gsap.utils.random(-400, -150),
-      duration : 3.5,
      rotate: () => gsap.utils.random(-180, 180),
      ease: "none",
      stagger: 0.05
    }).to(".title", {
        y: window.innerHeight - 130,
-        duration: 4.0,
-        ease: "power2.inOut"
+        ease: "power2.inOut",
+        duration: 2.0
      }, 0)

  }, main.value)
@@ -82,7 +77,7 @@ onMounted(() => {

 onUnmounted(() => {
  ctx?.revert()
-  scrollTrigger.getAll().forEach(t => t.kill())
+  // scrollTrigger.getAll().forEach(t => t.kill())
 }) 


@@ -110,6 +105,26 @@ onUnmounted(() => {
      <div class="box">o</div>
      <div class="box">T</div>      
      <div class="box">r</div>   
+      <div class="box">l</div>
+      <div class="box">e</div>
+      <div class="box">e</div>
+      <div class="box">r</div>
+      <div class="box">p</div>
+      <div class="box"></div>
+      <div class="box">H</div>
+      <div class="box">e</div>
+      <div class="box">d</div>
+      <div class="box">n</div>
+      <div class="box">a</div>
+      <div class="box">e</div>
+      <div class="box">l</div>
+      <div class="box">A</div>
+      <div class="box">x</div>
+      <div class="box">m</div>
+      <div class="box">o</div>
+      <div class="box">T</div>      
+      <div class="box">r</div>   
+      
       

    </div>
--- a/src/components/sections/ImageSection.vue
+++ b/src/components/sections/ImageSection.vue
@@ -9,36 +9,39 @@ import water from '../../assets/myself/27-2.jpg'
 import gopro from '../../assets/myself/GOPR0521.png'


+import { ref, onMounted, onUnmounted } from "vue"
+import gsap from "gsap"
+import ScrollTrigger from "gsap/ScrollTrigger"
+import Flip from 'gsap/dist/Flip'

-import { gsap } from "gsap"
-import { ScrollTrigger } from 'gsap/ScrollTrigger';
-import { Flip } from 'gsap/Flip';
+gsap.registerPlugin(ScrollTrigger),
+gsap.registerPlugin(Flip);

-gsap.registerPlugin(ScrollTrigger, Flip);
+const section = ref(null)
+const gallery = ref(null)
+
+let ctx
+let flipCtx

-let flipCtx;


 const createTween = () => {
-  let galleryElement = document.querySelector("#gallery-8");
+  let galleryElement = gallery.value
  let galleryItems = galleryElement.querySelectorAll(".gallery__item");

-  console.log(flipCtx);
-
  flipCtx && flipCtx.revert();
  galleryElement.classList.remove("gallery--final");

  flipCtx = gsap.context(() => {
-    // Temporarily add the final class to capture the final state
-    galleryElement.classList.add("gallery--final");
-    const flipState = Flip.getState(galleryItems);
-    galleryElement.classList.remove("gallery--final");

-    const flip = Flip.to(flipState, {
+    galleryElement.classList.add("gallery--final")
+    const state = Flip.getState(galleryItems)
+    galleryElement.classList.remove("gallery--final")
+
+    const flip = Flip.to(state, {
      simple: true,
-      ease: "expoScale(1, 5)"
-    });
-
+      ease: "expoScale(1,5)"
+    })
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: galleryElement,
@@ -46,21 +49,37 @@ const createTween = () => {
        end: "+=100%",
        scrub: true,
        pin: galleryElement.parentNode
-        // markers: true
      }
-    });
-    tl.add(flip);
-    return () => gsap.set(galleryItems, { clearProps: "all" });
-  });
-};
-createTween();
+    })
+    tl.add(flip)
+  }, section.value)
+}
+  
+onMounted(() => {
+
+  ctx = gsap.context(() => {
+    createTween()
+  }, section.value)
+
+  window.addEventListener("resize", createTween)
+  ScrollTrigger.refresh()
+})
+
+onUnmounted(() => {
+  ctx.revert()
+  flipCtx?.revert()
+
+  window.removeEventListener("resize", createTween)
+})
+
+
+

-window.addEventListener("resize", createTween);
 </script>
 <template>
-     <section class="image-section">
+<section class="image-section" ref="section">
 <div class="gallery-wrap">
-  <div class="gallery gallery--bento gallery--switch" id="gallery-8">
+  <div class="gallery gallery--bento gallery--switch" id="gallery-8" ref="gallery">
    <div class="gallery__item">
      <img :src=boxen alt="" />
    </div>
@@ -88,7 +107,7 @@ window.addEventListener("resize", createTween);

  </div>
 </div>
-<div class="section">
+<div class="text">
  <h2>Here is some content</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@@ -192,7 +211,7 @@ p {
  grid-area: 4 / 2 / 5 / 3;
 }

-.section {
+.text {
  padding: 2rem 5rem;
 }

--- a/src/utils/gsap.js
+++ b/src/utils/gsap.js
@@ -0,0 +1,11 @@
+import gsap from "gsap"
+import ScrollTrigger from "gsap/ScrollTrigger"
+import Flip from "gsap/Flip"
+
+gsap.registerPlugin(ScrollTrigger, Flip)
+
+ScrollTrigger.config({
+  ignoreMobileResize: true
+})
+
+export { gsap, ScrollTrigger, Flip }