[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useRef, useLayoutEffect } from "react" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" // It's best practice to register GSAP plugins in a layout or provider // but for a single page component, we can do it here. gsap.registerPlugin(ScrollTrigger) export default function Home() { const component = useRef(null) const sectionsRef = useRef([]) const addToRefs = (el: HTMLElement) => { if (el && !sectionsRef.current.includes(el)) { sectionsRef.current.push(el) } } useLayoutEffect(() => { const ctx = gsap.context(() => { // --- SECTION 1: FADE AND SLIDE UP --- gsap.fromTo( sectionsRef.current[0].querySelectorAll("h1, p"), { opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 1, stagger: 0.2, scrollTrigger: { trigger: sectionsRef.current[0], start: "top center", toggleActions: "play none none reverse", }, }, ) // --- SECTION 2: SCALE AND FADE IN --- gsap.fromTo( sectionsRef.current[1].querySelectorAll("h1, p"), { opacity: 0, scale: 0.8 }, { opacity: 1, scale: 1, duration: 1, stagger: 0.2, scrollTrigger: { trigger: sectionsRef.current[1], start: "top center", toggleActions: "play none none reverse", }, }, ) // --- SECTION 3: SLIDE IN FROM SIDES --- gsap.fromTo( sectionsRef.current[2].querySelector("h1"), { opacity: 0, x: -100 }, { opacity: 1, x: 0, duration: 1, scrollTrigger: { trigger: sectionsRef.current[2], start: "top center", toggleActions: "play none none reverse", }, }, ) gsap.fromTo( sectionsRef.current[2].querySelector("p"), { opacity: 0, x: 100 }, { opacity: 1, x: 0, duration: 1, scrollTrigger: { trigger: sectionsRef.current[2], start: "top center", toggleActions: "play none none reverse", }, }, ) }, component) return () => ctx.revert() // cleanup }, []) return (

Creative Motion

Scroll down to experience animations that bring content to life, making every interaction memorable.

Engaging Stories

We use GSAP and ScrollTrigger to craft fluid, performant, and captivating web narratives.

Seamless Flow

Animations are precisely timed to your scroll, creating a seamless and intuitive user journey.

) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; /* This helps with smooth scrolling, which can improve the feel of scroll-triggered animations */ scroll-behavior: smooth; } }

About

Tags

Share

More from emmartinzok

More Templates Like This

About

Tags

Share

About

Tags

Share

More from emmartinzok

More Templates Like This