Angular devs ship 3D and motion without touching raw Three.js or GSAP

WebGL and scroll animation are powerful but operationally expensive — memory leaks, resize observers, Angular zone conflicts, and SSR incompatibility are the default experience. These two libraries abstract all of that into declarative directives so you spend time on product, not renderer plumbing.

The challenge

Bridging Three.js and GSAP — both of which operate outside Angular's change detection — into a fully reactive, SSR-safe Angular component model.

The outcome

This portfolio site itself runs on both libraries — the animations and 3D elements you see are the libraries in production use.

Technical approach

• Three.js scene graph — declarative component tree mapped to WebGL scene objects
• Angular directive composition — structural and attribute directives that wrap renderer lifecycle
• GSAP ScrollTrigger — scroll-position-driven animation timeline with scrub and pin support
• Lenis smooth scroll — momentum-based native scroll replacement with GSAP integration
• NgZone.runOutsideAngular — animation loops run outside change detection for 60fps stability
• WebGL context management — automatic context loss handling and resize observer integration
• SSR-safe rendering — browser-only code paths guarded for Angular Universal / SSG
• Tree-shakeable exports — all directives individually importable for minimal bundle impact
• ViewContainerRef injection — dynamic Three.js object instantiation tied to Angular DI

Results at a glance

381

npm downloads/mo

54

Three.js components

19

GSAP directives

2

Libraries maintained