Skip to main content

Documentation

Everything you need to build stunning, animated interfaces with Angular and GSAP. Copy-paste ready blocks optimized for performance and accessibility.

Introduction

GSAP Blocker is a curated collection of high-quality, animated UI blocks built with Angular and Tailwind CSS. We enable you to ship premium experiences faster by providing production-ready components.

⚡️ Angular Signals

Built with the latest reactivity primitives for optimal performance.

🎭 GSAP Animations

Smooth, complex animations powered by the industry standard library.

Installation

To get started, ensuring you have the necessary dependencies installed in your Angular project:

npm install gsap tailwindcss postcss autoprefixer

Ensure gsap is correctly configured for SSR if you are using Angular Universal / SSR.

Theming

We use semantic CSS variables compatible with Tailwind CSS v4.

Background
bg-background
Foreground
bg-foreground
Primary
bg-primary
Muted
bg-muted

The theme adapts automatically to light and dark modes.