[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) => (

))}

) }

About

Tags

Share

More from dominikkoch

More Templates Like This

About

Tags

Share

About

Tags

Share

More from dominikkoch

More Templates Like This