91:I[903690,["/chat-static/_next/static/immutable/chunks/24wgnt312c8b6.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/3andy-ypw7v3e.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/36mcxef_dju-o.js","/chat-static/_next/static/immutable/chunks/22oy-kw0t_wik.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/3__zsxyhzg0xw.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3hykr3pi3-n67.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/0wwc93vmhyyfd.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1sqsw1l_zcj52.js","/chat-static/_next/static/immutable/chunks/0vy-z01vj9zn4.js","/chat-static/_next/static/immutable/chunks/0ol2dp4k1g4y6.js","/chat-static/_next/static/immutable/chunks/0r1hc1jjtp8ni.js","/chat-static/_next/static/immutable/chunks/39b6kb95iib19.js","/chat-static/_next/static/immutable/chunks/3nyxpho2kbzkk.js","/chat-static/_next/static/immutable/chunks/39eb2kmpdon1l.js","/chat-static/_next/static/immutable/chunks/15j2l9ysttyad.js","/chat-static/_next/static/immutable/chunks/2ww7oozza38t6.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/1fpx_rz9_3g_2.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/1wrkmwn5mlljg.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"ExplicitChatIdProvider"] 92:I[838238,["/chat-static/_next/static/immutable/chunks/24wgnt312c8b6.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/3andy-ypw7v3e.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/36mcxef_dju-o.js","/chat-static/_next/static/immutable/chunks/22oy-kw0t_wik.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/3__zsxyhzg0xw.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3hykr3pi3-n67.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/0wwc93vmhyyfd.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1sqsw1l_zcj52.js","/chat-static/_next/static/immutable/chunks/0vy-z01vj9zn4.js","/chat-static/_next/static/immutable/chunks/0ol2dp4k1g4y6.js","/chat-static/_next/static/immutable/chunks/0r1hc1jjtp8ni.js","/chat-static/_next/static/immutable/chunks/39b6kb95iib19.js","/chat-static/_next/static/immutable/chunks/3nyxpho2kbzkk.js","/chat-static/_next/static/immutable/chunks/39eb2kmpdon1l.js","/chat-static/_next/static/immutable/chunks/15j2l9ysttyad.js","/chat-static/_next/static/immutable/chunks/2ww7oozza38t6.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/1fpx_rz9_3g_2.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/1wrkmwn5mlljg.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"SWRDataProvider"] 93:T1e73,[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "GSAP ScrollTrigger Demo", description: "A Next.js starter kit with GSAP ScrollTrigger animations", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/section.tsx" isEdit="true" "use client" import { useEffect, useRef, useState } from "react" import gsap from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" interface SectionProps { color: string text: string index: number setRevealing: (revealing: boolean) => void } export default function Section({ color, text, index, setRevealing }: SectionProps) { const sectionRef = useRef(null) const textRef = useRef(null) const observerRef = useRef(null) const timelineRef = useRef(null) const scrollProgressRef = useRef(0) const [isVisible, setIsVisible] = useState(false) const [debugInfo, setDebugInfo] = useState("") // Set up intersection observer to detect when section is in view useEffect(() => { const sectionElement = sectionRef.current if (!sectionElement) return observerRef.current = new IntersectionObserver( (entries) => { const [entry] = entries setIsVisible(entry.isIntersecting) if (entry.isIntersecting) { setRevealing(true) } else { setRevealing(false) } }, { threshold: 0.9 }, // Consider visible when 90% in view ) observerRef.current.observe(sectionElement) return () => { if (observerRef.current) { observerRef.current.disconnect() } } }, [setRevealing]) // Set up GSAP animation useEffect(() => { if (!isVisible) return gsap.registerPlugin(ScrollTrigger) const textElement = textRef.current const sectionElement = sectionRef.current if (!textElement || !sectionElement) return // Split text into individual characters const characters = text.split("") textElement.innerHTML = "" characters.forEach((char) => { const charSpan = document.createElement("span") charSpan.textContent = char === " " ? "\u00A0" : char charSpan.style.display = "inline-block" charSpan.style.opacity = "0" charSpan.style.transform = "translateY(20px)" textElement.appendChild(charSpan) }) const charElements = textElement.querySelectorAll("span") // Create timeline const tl = gsap.timeline({ paused: true }) tl.to(charElements, { opacity: 1, y: 0, stagger: 0.1, ease: "power1.inOut", duration: 0.5, }) timelineRef.current = tl // Handle wheel events to progress the animation const handleWheel = (e: WheelEvent) => { if (!isVisible) return e.preventDefault() // Get scroll direction const isScrollingDown = e.deltaY > 0 // Update progress based on scroll direction and amount // Use a smaller multiplier for more precise control const delta = e.deltaY * 0.0005 const newProgress = Math.max(0, Math.min(1, scrollProgressRef.current + delta)) // Update the timeline progress if (timelineRef.current) { timelineRef.current.progress(newProgress) } // Update the stored progress scrollProgressRef.current = newProgress // Update debug info setDebugInfo(`Progress: ${newProgress.toFixed(2)}, Direction: ${isScrollingDown ? "Down" : "Up"}`) // Determine if we should allow navigation to next/prev section if (isScrollingDown && newProgress >= 1) { // Fully revealed and scrolling down - allow navigation to next section setRevealing(false) } else if (!isScrollingDown && newProgress <= 0) { // Fully hidden and scrolling up - allow navigation to previous section setRevealing(false) } else { // Still revealing/hiding - prevent navigation setRevealing(true) } } // Use capture phase to ensure our handler runs first window.addEventListener("wheel", handleWheel, { passive: false, capture: true }) return () => { window.removeEventListener("wheel", handleWheel, { capture: true }) if (timelineRef.current) { timelineRef.current.kill() } } }, [isVisible, text, setRevealing]) return (

{/* Text will be populated by JavaScript */}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useEffect, useRef } from "react" import Section from "@/components/section" export default function Home() { const sections = [ { id: 1, color: "bg-rose-500", text: "Welcome to ScrollTrigger" }, { id: 2, color: "bg-amber-500", text: "Smooth Animations" }, { id: 3, color: "bg-emerald-500", text: "Triggered on Scroll" }, { id: 4, color: "bg-sky-500", text: "Built with GSAP" }, { id: 5, color: "bg-purple-500", text: "And Next.js" }, ] const containerRef = useRef(null) const currentSectionIndex = useRef(0) const isAnimating = useRef(false) const isRevealing = useRef(false) useEffect(() => { const container = containerRef.current if (!container) return // Function to handle wheel events const handleWheel = (e: WheelEvent) => { // If we're revealing text, let the section component handle it if (isRevealing.current) return // If we're currently animating between sections, don't do anything if (isAnimating.current) return e.preventDefault() const direction = e.deltaY > 0 ? 1 : -1 const nextIndex = Math.max(0, Math.min(sections.length - 1, currentSectionIndex.current + direction)) // If we're already at the target section, don't do anything if (nextIndex === currentSectionIndex.current) return isAnimating.current = true // Scroll to the next section const targetSection = container.children[nextIndex] as HTMLElement targetSection.scrollIntoView({ behavior: "smooth" }) // Update current section index currentSectionIndex.current = nextIndex // Reset animation flag after animation completes setTimeout(() => { isAnimating.current = false }, 1000) } // Add event listener container.addEventListener("wheel", handleWheel, { passive: false }) // Cleanup return () => { container.removeEventListener("wheel", handleWheel) } }, [sections.length]) // Function to set revealing state (will be called from Section component) const setRevealing = (revealing: boolean) => { isRevealing.current = revealing } return (

{sections.map((section, index) => (

))}

) } 88:["$","$L91",null,{"chatId":"U93Li9EmZ9y","children":["$","$L92",null,{"data":{"@\"active-block\",\"U93Li9EmZ9y\",":{"id":"b_BBAheYc95IG","messageId":"BX1jYJO1TFsGCOrfbuzQZr6trUE9W8xz","source":"$93","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"gsap-scroll","type":"code-project","project":"gsap-scroll"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"U93Li9EmZ9y\",":false},"children":"$L94"}]}]

About

Tags

Share

About

Tags

Share

More from dominikkoch

More Templates Like This