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

gsap-sveltekit

Implements GSAP page transitions and component animation lifecycles in SvelteKit with Svelte 5.

1|Updated Aug 17, 2026
Search Tags:#animation#page transitions#SvelteKit#Svelte 5#gsap#ScrollTrigger#view transitions
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill gsap-sveltekit-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-sveltekit
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/gsap-sveltekit
Command: npx skills add https://github.com/NalinDalal/skillset --skill gsap-sveltekit-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, @sveltejs/kit, svelte, and includes references (resource) components.

What problem does it solve? Animating SvelteKit apps with GSAP breaks easily: pages get reused on param changes, intros flash settled content before hydration, outros get skipped on back/forward navigation, and hidden content hurts indexing and LCP. This Skill provides a complete lifecycle contract (mount → initial state → intro → settled → outro → end state → unmount) plus recovery, cleanup, and verification rules so route and component animation behaves correctly. ## Core Features & Use Cases - Engine selection guidance: Decides between Svelte transitions, View Transitions, and GSAP per element, with rules to keep one engine per node. - Navigation-aware transitions: Covers beforeNavigate vs onNavigate outro strategies, navigation locking, popstate handling, page reuse vs {#key} remount, and swap-gap covers. - Initialization and recovery contract: Pre-paint hiding with deadlines, rollback on setup failure, reduced-motion paths, and a failure verification matrix protecting readability, SEO, and LCP. - Use Case: Add an interruptible GSAP page transition to a SvelteKit app where the outgoing page animates before the URL changes, back/forward skips the outro, and a blocked bundle still leaves content readable. ## Quick Start Use the gsap-sveltekit skill to add GSAP page transitions and component enter/exit animations to this SvelteKit app.

Frequently Asked Questions about gsap-sveltekit

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

FAQPage Schema
How do I add GSAP page transitions in SvelteKit?▼

Use a layout-level controller with a route container, run the outgoing page's outro from beforeNavigate or onNavigate, and the incoming intro from afterNavigate. Keep the outgoing page mounted until the outro completes, then resolve the router's wait exactly once.

GSAP vs Svelte transitions vs View Transitions in SvelteKit?▼

Use Svelte transition directives for simple block motion, View Transitions from onNavigate for snapshot morphs or crossfades, and GSAP for interruptible sequences, split text, or scroll-linked motion. Never run two engines on the same element.

Why does my SvelteKit page intro not replay on navigation?▼

SvelteKit reuses a page component when only params change, so onMount does not re-run. Restart the lifecycle from afterNavigate with explicit set or fromTo initial values, or wrap the page in {#key page.url.pathname} to force a remount.

Does GSAP work during SvelteKit server-side rendering?▼

No. GSAP runs only in the browser; onMount and $effect never execute on the server. Guard module-level code with browser from $app/environment and register plugins once in a browser-guarded module.

How do I prevent content flashing before a GSAP intro?▼

Hide intro targets only under a root attribute set by an inline script in app.html, only during the initial phase, with a no-JavaScript readable path. Arm a bounded recovery deadline so a blocked bundle still restores readable content.

Should I run an outro animation on back/forward navigation?▼

No. Back and forward arrive as popstate through the same hooks; never cancel them or run an outro. Give them an intro-only path after the router restores scroll, and refresh ScrollTrigger afterward.

Related Skills

Explore More Software Engineering Skills→
Tomlord1122Tomlord1122

svelte-kit

Apply Svelte 5 runes and SvelteKit routing guidance to projects.

Community
Advanced
range-etrange-et

optimize

Audit frontend loading, rendering, and animation paths to reduce LCP, TTI, CLS, and bundle size.

Community
Advanced
nnececnnecec
2

gsap-frameworks

Apply GSAP animations in Vue and Svelte with lifecycle cleanup.

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