The open-source GSAP animation component library for Next.js developers — learn, copy, and contribute modern web animation patterns built with GSAP 3.15, Next.js 16, and Lenis.
Live Demo • Contributing Guide • Roadmap
TweenLabs is a community-driven, open-source collection of reusable GSAP animation components for Next.js and React. Every component is production-ready, well-documented, and built to help developers understand how advanced web animations work — not just copy code blindly.
No paid plugins. No locked content. Just clean, modern animation patterns anyone can learn from and build on.
🔍 Looking for a GSAP component library for Next.js? You found it.
| Component | Description | GSAP Features Used |
|---|---|---|
| Gravity Drop | Physics-based falling animations with realistic bounce | gsap.to, ease, stagger |
| Scroll-Triggered Assemblies | Content reveals synced with scroll position | ScrollTrigger |
| Border Reveal Effects | Inward/outward border animations | Timeline, clipPath |
| Horizontal Card Showcase | Smooth carousel and card transitions | ScrollTrigger, x transforms |
| Page Transitions | Seamless route change animations | Timeline, Next.js router |
| Smooth Scrolling | Native-feel smooth scroll | Lenis + GSAP ticker |
More components added with every contribution. See full list →
- Next.js 16 – React framework with SSR and App Router
- GSAP 3.15 – Industry-standard JavaScript animation library
- React 19 – Modern component-based UI
- Lenis 1.3 – Buttery smooth scroll
- Tailwind CSS 4 – Utility-first styling
- TypeScript – Full type safety
# Install pnpm if you don't have it
npm install -g pnpm
# Clone and run
git clone https://github.com/TweenLabs/TweenLabs.git
cd TweenLabs
pnpm install
pnpm devOpen http://localhost:3000 — pick any animation card and start exploring.
TweenLabs grows with the community. We welcome new components, bug fixes, docs, performance improvements, and accessibility enhancements.
# 1. Fork the repo, then clone your fork
git clone https://github.com/YOUR_USERNAME/TweenLabs.git
# 2. Create a branch
git checkout -b feat/your-animation-name
# 3. Install & run
pnpm install && pnpm dev
# 4. Make changes, then commit
git commit -m "feat: add [animation name]"
# 5. Push and open a PR
git push origin feat/your-animation-name- Follow the folder pattern:
src/app/XX-component-name/ - Include a
page.tsxwith your animation - Add inline comments explaining the GSAP logic
- Reference
gsapskills.mdfor best practices
- ✅ Add explanatory comments to existing animations
- ✅ Test on mobile/tablet and report issues
- ✅ Create animation variants with different easing curves
- ✅ Improve accessibility (
prefers-reduced-motion, ARIA) - ✅ Write or improve docs
- Use CSS transforms (
x,y,scale) — never layout properties - Always respect
prefers-reduced-motion - TypeScript only — no
anytypes - Write descriptive commit messages
- Export as npm package (
@tweenlabs/components) - Storybook integration for isolated component previews
- Unit tests for animation logic
- FLIP, Draggable, MorphSVG animation patterns
- Community showcase gallery
- Animation starter templates for common use cases
New to GSAP? These resources pair perfectly with this repo:
- GSAP Official Docs — start here
- GSAP + React Guide — useGSAP hook
- ScrollTrigger Docs — scroll animations
- Next.js Docs — framework reference
- Lenis Docs — smooth scroll setup
MIT — free to use in personal and commercial projects.
Built in public. Animated with love. Open to all. 🚀
