From 8c8568a4b56f3cb48c9d733345fa244397555441 Mon Sep 17 00:00:00 2001
From: T-A-H-prog <tomherpel.de>
Date: Sun, 8 Mar 2026 14:00:52 +0100
Subject: [PATCH] starting to animate imagesection

---
 src/App.vue                              |  4 +-
 src/components/sections/HeroSection.vue  | 10 +++--
 src/components/sections/ImageSection.vue | 50 +++++++++++++++++++++++-
 3 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 98177b4..4b06fa6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,4 +1,6 @@
-<script setup lang="ts">
+<script setup lang="js">
+
+
 </script>
 
 <template>
diff --git a/src/components/sections/HeroSection.vue b/src/components/sections/HeroSection.vue
index 5f7506c..bf44a53 100644
--- a/src/components/sections/HeroSection.vue
+++ b/src/components/sections/HeroSection.vue
@@ -3,6 +3,8 @@ import { onMounted, onUnmounted, ref } from "vue"
 import gsap from "gsap"
 
 import ScrollTrigger from "gsap/ScrollTrigger"
+
+
 gsap.registerPlugin(ScrollTrigger)
 
 
@@ -51,15 +53,16 @@ function startNextAnimation() {
     tl = gsap.timeline({
       scrollTrigger: {
         trigger: ".scroll-trigger-ready__worm-wrap",
-        start: "top 00%",
+        start: "top top",
         end: "bottom 35%",
-        scrub: 2
+        scrub: 2,
+        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
@@ -79,6 +82,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   ctx?.revert()
+  scrollTrigger.getAll().forEach(t => t.kill())
 }) 
 
 
diff --git a/src/components/sections/ImageSection.vue b/src/components/sections/ImageSection.vue
index 33fc09a..878c3b5 100644
--- a/src/components/sections/ImageSection.vue
+++ b/src/components/sections/ImageSection.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import ski from '../../assets/myself/ski.png'
 import book from '../../assets/myself/SmartTom.jpeg'
 import surf from '../../assets/myself/surf.png'
@@ -8,6 +8,54 @@ import schnee from '../../assets/myself/DSCN1921.jpg'
 import water from '../../assets/myself/27-2.jpg'
 import gopro from '../../assets/myself/GOPR0521.png'
 
+
+
+import { gsap } from "gsap"
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { Flip } from 'gsap/Flip';
+
+gsap.registerPlugin(ScrollTrigger, Flip);
+
+let flipCtx;
+
+
+const createTween = () => {
+  let galleryElement = document.querySelector("#gallery-8");
+  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, {
+      simple: true,
+      ease: "expoScale(1, 5)"
+    });
+
+    const tl = gsap.timeline({
+      scrollTrigger: {
+        trigger: galleryElement,
+        start: "center center",
+        end: "+=100%",
+        scrub: true,
+        pin: galleryElement.parentNode
+        // markers: true
+      }
+    });
+    tl.add(flip);
+    return () => gsap.set(galleryItems, { clearProps: "all" });
+  });
+};
+createTween();
+
+window.addEventListener("resize", createTween);
 </script>
 <template>
      <section class="image-section">