GSAP Narrative
Scroll-driven storytelling template with pin sections and timeline sequences.
Next.js 14TypeScriptTailwindGSAP
$297one-time
96/100 LHPreview →
Deloryen Studio
Next.js GSAP Animation Templates
GSAP is the animation engine that powers the most awarded websites on the internet — and the most abused. ScrollTrigger pinning without performance consideration, timeline sequences that block the main thread, and animation libraries loaded synchronously on every page are the hallmarks of GSAP implementations that prioritize demonstration over discipline. Deloryen GSAP templates are built with the opposite philosophy: every animation is GPU-accelerated using transforms and opacity only, ScrollTrigger instances are created and destroyed with route lifecycle awareness, GSAP is code-split and loaded only on pages that require it, and the Lighthouse score stays above 95 because animation performance is not an afterthought. The result is a site that earns Awwwards attention while maintaining the technical credibility that serious clients demand.
- GSAP ScrollTrigger with pin and scrub
- Timeline sequences for coordinated reveals
- SplitText for character and word animation
- Horizontal scroll sections
- GPU-accelerated transforms only
- Code-split GSAP loading per route
- Route-aware animation cleanup
- prefers-reduced-motion compliance
Available Templates
GSAP Portfolio
Portfolio template with horizontal scroll gallery and SplitText reveals.
Next.js 14TypeScriptTailwindGSAP
$247one-time
97/100 LHPreview →
GSAP Agency
Agency template with scroll-triggered case study reveals and pinned hero.
Next.js 14TypeScriptTailwindGSAP
$247one-time
95/100 LHPreview →
What Every Template Includes
Production Standards. Not Marketing Claims.
| Specification | Other Marketplaces | Deloryen Studio |
|---|---|---|
| Lighthouse Performance | 62–74 | 95–100 |
| Next.js Architecture | Pages Router common | App Router only |
| TypeScript Coverage | Partial or absent | 100% strict mode |
| CSS System | Bootstrap (200kb+) | Tailwind (10kb purged) |
| Structured Data | Rarely included | Every page |
| GEO Optimization | None | Built-in |
| Performance Guarantee | None | Documented + testable |
| License | Complex, tiered | Clear commercial terms |
FAQ
Frequently Asked Questions
Does GSAP affect Lighthouse performance in Deloryen templates?
+
No. GSAP is loaded as a client-side module, code-split per route. All animations use GPU-accelerated properties (transform, opacity) that do not trigger layout or paint. Lighthouse scores remain at 95+.
Is ScrollTrigger included with the GSAP templates?
+
Yes. ScrollTrigger with pin, scrub, and snap functionality is pre-configured. Documentation covers creating custom scroll-driven animations without affecting performance.
Can I combine GSAP with Framer Motion in the same template?
+
Deloryen templates use one animation system per template to avoid bundle bloat and API conflicts. GSAP templates use GSAP exclusively. Framer Motion templates are available separately.
Are GSAP animations accessible to users with motion sensitivity?
+
Yes. All GSAP animations respect the prefers-reduced-motion media query. Users with motion sensitivity receive static content with no animation automatically.
Your move