Menu

Post image 1
Post image 2
1 / 2
0

I Built a 8.7KB React Animation Library (120+ FPS) on top of GSAP

DEV Community·Yousef Zedan·20 days ago
#lTlSnh64
Reading 0:00
15s threshold

After weeks of development, I'm excited to share ZProximity Engine - a React library for creating proximity-based animations. 🎯 The Problem Creating magnetic cursors, hover effects, and scroll animations in React usually requires: Manual event listeners Complex trigonometry Performance optimization headaches ✨ The Solution ZProximity Engine abstracts all of this into a simple API: import { Proximity } from ' z-proximity-engine ' ; < Proximity preset = "scale-magnetic" reach = { 2 } > < div className = "prox-item" > Hover me! </ div > </ Proximity > Enter fullscreen mode Exit fullscreen mode 🏗️ Technical Highlights 1. Zero Re-renders Uses GSAP's ticker system instead of React's render cycle. 2. Smart Batching Pre-caches quickTo functions on mount - no property lookups per frame. 3. Spatial Grid 150px spatial hash grid - only checks nearby elements, not all 100+. 4. Minimal Bundle Tree-shakeable, only 8KB core.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More