skills.rest
NalinDalal
NalinDalalCOMMUNITY
Explore all skills by this author →
Website𝕏@nalin82929GitHub

gsap-tanstack-router

Implements GSAP page transitions and component lifecycles in TanStack Router applications.

1|Updated Aug 17, 2026
Search Tags:#TanStack Router#page transitions#gsap#react animation#view transitions#ssr hydration#useblocker
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill gsap-tanstack-router-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-tanstack-router
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/gsap-tanstack-router
Command: npx skills add https://github.com/NalinDalal/skillset --skill gsap-tanstack-router-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-router, @tanstack/react-start, gsap, @gsap/react, and includes references (resource) components.

What problem does it solve? Animating route changes in TanStack Router apps is error-prone: pages unmount before outros play, reused routes skip mount effects, blockers hang on interrupted navigations, and SSR content flashes before hydration. This Skill provides a complete lifecycle model and router-specific rules so GSAP transitions work correctly across navigation, pending states, and TanStack Start SSR. ## Core Features & Use Cases - Five-phase lifecycle controller: mount, initial state, intro, settled, outro, end state, and unmount, with a root-level controller coordinating page transitions via useBlocker. - Router-aware navigation handling: covers back/forward without outros, rapid double navigation, route reuse on param changes, pending UI, scroll restoration, and View Transitions integration. - SSR and recovery contracts: pre-paint hiding rules with ScriptOnce, initialization deadlines, failure recovery, reduced-motion paths, and a verification matrix. - Use Case: Add a fade-and-slide page transition to a TanStack Start app where the outgoing page plays its outro before navigation commits, the incoming page animates in after loaders resolve, and back-button navigation skips the outro cleanly. ## Quick Start Use the gsap-tanstack-router skill to add GSAP page transitions to my TanStack Router app with an outro before navigation and an intro on the incoming page.

Frequently Asked Questions about gsap-tanstack-router

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add GSAP page transitions to TanStack Router?▼

Mount a useBlocker in the root route whose shouldBlockFn returns a promise resolved by the outro timeline's end callback. The outgoing page stays mounted during the outro, then the blocker releases and the incoming page plays its intro after mounting.

Should I use View Transitions or GSAP for route animations?▼

Use defaultViewTransition or the viewTransition option for snapshot morphs and page crossfades. Use GSAP for live-DOM outros that gate navigation, interruptible sequences, split text, or scroll-linked motion. Never animate the same element with both engines in one transition.

Does GSAP work with TanStack Start server-side rendering?▼

GSAP runs only on the client; useGSAP never executes on the server. For SSR, hide intro targets with a CSS rule keyed on a root attribute set by a ScriptOnce inline script, keep content readable without JavaScript, and register recovery before setup.

Why does my outro animation not play before navigation in TanStack Router?▼

The router unmounts the outgoing page on commit, so no router event fires early enough. Only a blocker runs before the URL changes for PUSH and REPLACE; play the outro inside shouldBlockFn and resolve its promise from the timeline's completion callback.

How do I handle back and forward navigation with GSAP transitions?▼

Never run an outro for BACK, FORWARD, or GO actions because the URL has already moved when the blocker runs. Return false immediately, kill any running outro, and give the incoming page an intro-only path after scroll restoration completes in onRendered.

Why does my route animation not replay when params change?▼

Same-route navigations with new params reuse the component, so mount-based effects never rerun. Pass the params or loader data as useGSAP dependencies with revertOnUpdate, write initial state with set or fromTo, or configure remountDeps to force a remount.

Related Skills

Explore More Software Engineering Skills→
firstaxelfirstaxel

tanstack-router

Implements type-safe file-based routing with loaders and search params for React applications.

Community
Intermediate
mauriciodelriomauriciodelrio
3

animations-and-transitions

Implement performant UI animations in React/Next.js with Framer Motion and CSS transitions.

Community
Intermediate
VXerysVXerys

scaffold-gsap-scrolltrigger

Generate React/Next.js components with GSAP ScrollTrigger for scroll animations.

Community
Intermediate
Wayn-GitWayn-Git
52

page-transition-animation

Implements enter and exit page transitions in Next.js App Router using Framer Motion and the View Transitions API.

Community
Intermediate