Barba Js
If you need smooth page transitions without converting your multi-page site to a full SPA, this is the standard tool. It intercepts navigation, fetches content via AJAX, and handles the swap with lifecycle hooks for animations. Works well with GSAP for fade, slide, or crossfade effects. The sync mode lets you overlap animations, and the namespace system gives you per-page control. At 7kb it's lightweight, though you'll need to structure your HTML with the wrapper/container pattern and think through which elements stay persistent versus which ones transition. Good for portfolios, marketing sites, or anything where navigation feel matters.
- skills.sh installs
- 2.5K
- GitHub stars
- 1.3K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add freshtechbro/claudedesignskills --skill barba-js --agent claude-codeInstalls into .claude/skills of the current project.
Files
Barba.js
Modern page transition library for creating fluid, smooth transitions between website pages. Barba.js makes multi-page websites feel like Single Page Applications (SPAs) by hijacking navigation and managing transitions without full page reloads.
Overview
Barba.js is a lightweight (7kb minified and compressed) JavaScript library that intercepts navigation between pages, fetches new content via AJAX, and smoothly transitions between old and new containers. It reduces page load delays and HTTP requests while maintaining the benefits of traditional multi-page architecture.
Core Features:
- Smooth page transitions without full reloads
- Lifecycle hooks for precise control over transition phases
- View-based logic for page-specific behaviors
- Built-in routing with @barba/router plugin
- Extensible plugin system
- Small footprint and high performance
- Framework-agnostic (works with vanilla JS, GSAP, anime.js, etc.)
Core Concepts
1. Wrapper, Container, and Namespace
Barba.js uses a specific DOM structure to manage transitions:
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/freshtechbro/claudedesignskills
- Category
- Frontend Development
- First seen
- Jun 3, 2026
More from freshtechbro/claudedesignskills
All 23- Aframe Webxr2.5K
- Playcanvas Engine2.5K
- Skill Creator2.3K
- Motion Framer6.5K
- Threejs Webgl5K
- React Three Fiber4.1K
- Blender Web Pipeline3.9K
- Web3d Integration Patterns3.4K
- Lottie Animations3.1K
- Modern Web Design3.1K
- Animated Component Libraries3.1K
- Gsap Scrolltrigger3.1K
- Spline Interactive3K
- Animejs3K
- Lightweight 3d Effects2.8K
- Rive Interactive2.8K
- Locomotive Scroll2.7K
- Babylonjs Engine2.7K
- Pixijs 2d2.7K
- React Spring Physics2.6K
- Scroll Reveal Libraries2.6K
- Substance 3d Texturing2.6K
Recommended
More Frontend Development
weread-year-in-review-video-templatenexu-io/open-designWeRead-inspired HyperFrames video template for vertical annual reading reports, personal reading dashboards, book-note recaps, and shareable year-in-review stor2.5Kskills.sh installs
wireframe-specowl-listener/designer-skillsSpecify wireframe layouts with content priority, component placement, and annotation.2.5Kskills.sh installs
gzh-designisjiamu/gzh-design-skill微信公众号文章排版引擎，将 Markdown 转换为可直接粘贴到公众号编辑器的 HTML。主题风格从 references/theme-index.md 注册的自定义主题库中选取，自动章节编号、关键词下划线标记、引言卡片、目录导航、代码块、图片/GIF、作者签名。支持 Markdown / Word(.docx) / 2.4Kskills.sh installs
create-mcp-appmodelcontextprotocol/ext-appsThis skill should be used when the user asks to "create an MCP App", "add a UI to an MCP tool", "build an interactive MCP View", "scaffold an MCP App", or needs2.3Kskills.sh installsgsap-performancenexu-io/open-designOfficial GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or w2.3Kskills.sh installs
r3f-animationenzed/r3f-skillsReact Three Fiber animation - useFrame, useAnimations, spring physics, keyframes. Use when animating objects, playing GLTF animations, creating procedural motio2.2Kskills.sh installs