diff --git a/index.html b/index.html
index 5ea3825..7c33139 100644
--- 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>
diff --git a/src/App.vue b/src/App.vue
index 4b06fa6..b3ad18d 100644
--- 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>
diff --git a/src/components/sections/HeroSection.vue b/src/components/sections/HeroSection.vue
index bf44a53..b904379 100644
--- 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>
diff --git a/src/components/sections/ImageSection.vue b/src/components/sections/ImageSection.vue
index 878c3b5..d6fc818 100644
--- 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;
 }
 
diff --git a/src/utils/gsap.js b/src/utils/gsap.js
new file mode 100644
index 0000000..7fc0864
--- /dev/null
+++ 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 }
\ No newline at end of file
