th/th-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

scrollTrigger second section

Browse Source
This commit is contained in:
365884
2026-03-08 16:30:37 +01:00
parent 8c8568a4b5
commit 71de712741
5 changed files with 110 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>blog</title> <title>th</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

24
src/App.vue
View File

@@ -1,10 +1,32 @@
<script setup lang="js"> <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> </script>
<template> <template>
<router-view /> <div id="smooth-wrapper">
<div id="smooth-content">
<router-view />
</div>
</div>
</template> </template>
<style> <style>

41
src/components/sections/HeroSection.vue
View File

@@ -3,8 +3,6 @@ import { onMounted, onUnmounted, ref } from "vue"
import gsap from "gsap" import gsap from "gsap"
import ScrollTrigger from "gsap/ScrollTrigger" import ScrollTrigger from "gsap/ScrollTrigger"
gsap.registerPlugin(ScrollTrigger) gsap.registerPlugin(ScrollTrigger)
@@ -38,9 +36,6 @@ function setBoxes() {
}); });
} }
function toggleTimeline() { function toggleTimeline() {
tl.reversed(!tl.reversed()) tl.reversed(!tl.reversed())
} }
@@ -48,28 +43,28 @@ function startNextAnimation() {
const centerX = window.innerWidth / 2 const centerX = window.innerWidth / 2
const centerY = window.innerHeight / 2 const centerY = window.innerHeight / 2
const radius = 250 const radius = 250
ctx = gsap.context(() => { ctx = gsap.context(() => {
const boxes = gsap.utils.toArray(".box") const boxes = gsap.utils.toArray(".box")
tl = gsap.timeline({ tl = gsap.timeline({
scrollTrigger: { scrollTrigger: {
trigger: ".scroll-trigger-ready__worm-wrap",
start: "top top", start: "top top",
end: "bottom 35%", end: "+=100%",
scrub: 2, scrub: true,
pin: true pin: true,
} }
}) })
tl.to(boxes, { tl.to(boxes, {
y: () => gsap.utils.random(-400, -150), y: () => gsap.utils.random(-400, -150),
duration : 3.5,
rotate: () => gsap.utils.random(-180, 180), rotate: () => gsap.utils.random(-180, 180),
ease: "none", ease: "none",
stagger: 0.05 stagger: 0.05
}).to(".title", { }).to(".title", {
y: window.innerHeight - 130, y: window.innerHeight - 130,
duration: 4.0, ease: "power2.inOut",
ease: "power2.inOut" duration: 2.0
}, 0) }, 0)
}, main.value) }, main.value)
@@ -82,7 +77,7 @@ onMounted(() => {
onUnmounted(() => { onUnmounted(() => {
ctx?.revert() 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">o</div>
<div class="box">T</div> <div class="box">T</div>
<div class="box">r</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> </div>

75
src/components/sections/ImageSection.vue
View File

@@ -9,36 +9,39 @@ import water from '../../assets/myself/27-2.jpg'
import gopro from '../../assets/myself/GOPR0521.png' 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" gsap.registerPlugin(ScrollTrigger),
import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(Flip);
import { Flip } from 'gsap/Flip';
gsap.registerPlugin(ScrollTrigger, Flip); const section = ref(null)
const gallery = ref(null)
let ctx
let flipCtx
let flipCtx;
const createTween = () => { const createTween = () => {
let galleryElement = document.querySelector("#gallery-8"); let galleryElement = gallery.value
let galleryItems = galleryElement.querySelectorAll(".gallery__item"); let galleryItems = galleryElement.querySelectorAll(".gallery__item");
console.log(flipCtx);
flipCtx && flipCtx.revert(); flipCtx && flipCtx.revert();
galleryElement.classList.remove("gallery--final"); galleryElement.classList.remove("gallery--final");
flipCtx = gsap.context(() => { 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, simple: true,
ease: "expoScale(1, 5)" ease: "expoScale(1,5)"
}); })
const tl = gsap.timeline({ const tl = gsap.timeline({
scrollTrigger: { scrollTrigger: {
trigger: galleryElement, trigger: galleryElement,
@@ -46,21 +49,37 @@ const createTween = () => {
end: "+=100%", end: "+=100%",
scrub: true, scrub: true,
pin: galleryElement.parentNode pin: galleryElement.parentNode
// markers: true
} }
}); })
tl.add(flip); tl.add(flip)
return () => gsap.set(galleryItems, { clearProps: "all" }); }, section.value)
}); }
};
createTween(); 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> </script>
<template> <template>
<section class="image-section"> <section class="image-section" ref="section">
<div class="gallery-wrap"> <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"> <div class="gallery__item">
<img :src=boxen alt="" /> <img :src=boxen alt="" />
</div> </div>
@@ -88,7 +107,7 @@ window.addEventListener("resize", createTween);
</div> </div>
</div> </div>
<div class="section"> <div class="text">
<h2>Here is some content</h2> <h2>Here is some content</h2>
<p> <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> 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; grid-area: 4 / 2 / 5 / 3;
} }
.section { .text {
padding: 2rem 5rem; padding: 2rem 5rem;
} }

11
src/utils/gsap.js Normal file
View File

@@ -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 }