94:I[903690,["/chat-static/_next/static/chunks/350425sq4h0_m.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3_e1le12ldpqs.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/15arfkcfit5sz.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3rqx7sbpqnwga.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1r8nmvs6_rpja.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1n89ydk8ccom8.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2ynu6mgagwdj1.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1bxdx5g1i2u3_.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3c0qka1hg-iqt.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2s6vyh6zt9utn.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/395vtu34--uvp.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/105h5cas-3jdf.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0xt2xmw3qhxnw.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/26i06jc5kvmaj.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1nv4rik4luyt3.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/42qj3jlkt-gsv.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3w1s5uwmgh04y.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3eky-7-iak2ku.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0d2lsedvss_wq.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1yj2qc3b88ry8.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3x_wkg7f9hipy.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx"],"ExplicitChatIdProvider"] 95:I[838238,["/chat-static/_next/static/chunks/350425sq4h0_m.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3_e1le12ldpqs.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/15arfkcfit5sz.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3rqx7sbpqnwga.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1r8nmvs6_rpja.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1n89ydk8ccom8.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2ynu6mgagwdj1.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1bxdx5g1i2u3_.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3c0qka1hg-iqt.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/2s6vyh6zt9utn.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/395vtu34--uvp.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/105h5cas-3jdf.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0xt2xmw3qhxnw.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/26i06jc5kvmaj.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1nv4rik4luyt3.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/42qj3jlkt-gsv.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3w1s5uwmgh04y.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3eky-7-iak2ku.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/0d2lsedvss_wq.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/1yj2qc3b88ry8.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx","/chat-static/_next/static/chunks/3x_wkg7f9hipy.js?dpl=dpl_HHaqRHm6ADLCojiZftNA23ziRnDx"],"SWRDataProvider"] 96:T15b2,[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; } }8a:["$","$L94",null,{"chatId":"gPRLUFQVeNP","children":["$","$L95",null,{"data":{"@\"active-block\",\"gPRLUFQVeNP\",":{"id":"b_fQX41xAiQqg","messageId":"sYQenbViVgJCgRelQxx10y5DmGI5TKc6","source":"$96","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"gsap-scroll-animations","type":"code-project","project":"gsap-scroll-animations"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"gPRLUFQVeNP\",":false,"":null},"children":"$L97"}]}]

About

Tags

Share

About

Tags

Share

More from emmartinzok

More Templates Like This