If you want a Next.js site that feels physical — objects that tilt, orbit, and settle with weight — GSAP plus a 3D layer (Three.js / React Three Fiber) is still one of the most controllable stacks you can ship. This guide is how we plan, build, and harden 3D GSAP animation systems for client projects at ShubhKarma Tech in Dehradun.
What “3D GSAP in Next.js” actually means
People often mix three different jobs into one phrase. Clarify them early:
1) Scene rendering — WebGL via Three.js or React Three Fiber draws meshes, lights, and cameras.
2) Motion orchestration — GSAP owns timelines, scrubbing, easing, and ScrollTrigger pins.
3) App shell — Next.js owns routing, SSR/CSR boundaries, image/font loading, and SEO.
Your job is to keep those layers decoupled. When the canvas owns everything, you get brittle demos. When GSAP only tweens CSS while Three.js runs its own clocks, you get desync. Production work uses one master clock strategy.
When 3D animation is worth the budget
Use 3D GSAP when motion explains the product: a packaging reveal, a hardware explainer, a spatial brand world, or a scroll-story that would feel flat as 2D. Skip it when the business goal is a form fill in under 10 seconds. Fancy scenes that delay first interaction hurt conversion more than they help brand.
On local business sites (hospitality, tourism, agencies), we usually reserve 3D for the hero or one product story section — not every fold.
Architecture that survives App Router
Next.js App Router and WebGL need a hard client boundary. Put the canvas in a Client Component, lazy-load it behind dynamic(() => import(...), { ssr: false }), and never import three or gsap into a Server Component file.
Recommended folder shape:
1) components/canvas/Experience.tsx — R3F Canvas, lights, environment.
2) components/canvas/objects/* — meshes and materials.
3) components/motion/useSectionTimeline.ts — GSAP timeline factory.
4) components/motion/ScrollBinder.tsx — ScrollTrigger setup/teardown.
Keep animation config as data (progress ranges, ease names, scrub values) so designers can tune without rewriting JSX.
Choosing the 3D approach
React Three Fiber (R3F) is our default for product marketing pages: React lifecycle, declarative lights, and easy pairing with Drei helpers. Raw Three.js is better for a single full-bleed experience with unusual render loops. GLTF/GLB models should be compressed (Draco/meshopt) before they ever touch the homepage.
Texture budgets matter more than polygon counts for marketing pages. One 4K base color map can cost more than a clean 20k-triangle mesh.
The GSAP + 3D sync pattern we use
Pick one source of truth for time.
Pattern A — GSAP drives Three
Create a GSAP timeline that tweens plain objects ({ progress: 0 }). In onUpdate, write values into mesh.rotation, camera.position, or shader uniforms. ScrollTrigger scrub maps scroll to that progress. This is the most predictable pattern for storytelling sections.
Pattern B — Frame loop reads GSAP
Use gsap.ticker or R3F useFrame to sample timeline progress each frame. Useful when you also blend pointer parallax with scroll progress.
Avoid dual animation: do not animate the same property with both GSAP and an R3F spring unless one clearly overrides the other.
ScrollTrigger specifics for long pages
Pinning a WebGL canvas is expensive if the canvas stays at full DPR while offscreen. Practical rules we follow:
1) Pause the render loop when the section is less than ~10% visible.
2) Drop DPR to 1 on mobile; offer a “Enhance visuals” toggle only if the client insists.
3) Kill ScrollTriggers on route change — App Router navigations will leak listeners if you only rely on component unmount timing.
4) Prefer scrubbed timelines over infinite loops in SEO pages; loops burn battery and steal attention from CTAs.
Performance checklist (ship this before polish)
1) Lazy-load the canvas after LCP content (headline + CTA) is interactive.
2) Preload only the GLB needed above the fold; defer secondary models.
3) Use compressed textures or wisely sized WebP/PNG.
4) Cap lights; bake what you can into environment maps.
5) Measure Interaction to Next Paint and scroll FPS on a mid-range Android device, not only on a MacBook.
6) Provide a static poster image + reduced-motion fallback. Respect prefers-reduced-motion.
Accessibility and UX guardrails
Motion is content for some users and a barrier for others. Always ship:
1) A pause control for continuous motion.
2) A non-canvas fallback that still communicates the message.
3) Focusable CTAs outside the canvas hit area.
4) Captions or short copy that explain what the animation is demonstrating.
If the story cannot be understood with motion disabled, the story is incomplete.
SEO notes for animated marketing pages
Google indexes HTML text, not your WebGL scene. Put the thesis in real headings and paragraphs. Use the canvas as enhancement. Keep CLS stable by reserving aspect-ratio boxes for the canvas. Avoid inserting the entire product pitch only inside textures or 3D labels.
For case-study and homepage hybrids, we still write crawlable sections: problem, approach, stack, outcomes — then illustrate with 3D.
Implementation checklist we hand to engineers
1) Confirm business goal of the scene in one sentence.
2) Storyboard scroll progress 0→1 with camera and object key poses.
3) Build static layout + SEO copy first.
4) Mount canvas client-only with poster placeholder.
5) Wire GSAP progress object → scene graph.
6) Add ScrollTrigger with matched media for desktop/mobile pin distances.
7) Add visibility pausing + reduced-motion branch.
8) QA on low-end Android + Safari iOS.
9) Only then polish materials and micro-easing.
Common failures we see in audits
1) Importing GSAP plugins in a server file and crashing the build.
2) Creating a new Timeline on every scroll event.
3) Running multiple Canvases when one shared Canvas with layered scenes would do.
4) Shipping unoptimized Blender exports straight to production.
5) Animating layout-affecting CSS and WebGL camera simultaneously until scroll feels unstable.
How ShubhKarma Tech usually scopes this work
A focused hero scene with one scroll chapter is a different product than a multi-scene brand world. We scope by chapters, model count, interaction modes (scroll only vs scroll + pointer), and fallback policy. That keeps timelines honest for founders in Dehradun, across Uttarakhand, and for pan-India brands who want premium motion without tanking Core Web Vitals.
Bottom line
3D GSAP on Next.js works when motion is orchestrated, the canvas is isolated, and performance budgets are enforced early. Treat GSAP as the conductor and Three.js as the orchestra — not two bands playing different tempos on the same stage.