Awesome GitHub RepositoriesViewport Intersection Events

Splide is a framework-agnostic TypeScript library for creating accessible, touch-enabled content carousels and image galleries. It provides a dependency-free implementation of sliders that support drag, swipe, and flick interactions across mobile and desktop browsers. The library distinguishes itself through a comprehensive accessibility layer using ARIA roles and screen reader support. It features a responsive breakpoint system that adapts slide dimensions and behavior based on screen width, alongside a plugin system for extending core functionality with custom components and transition effe

هذه مكتبة رسوم متحركة React توفر مجموعة من المكونات لإنشاء حركة مصممة، وانتقالات معقدة، وتحويل SVG. تعمل كمواصفات لتصميم الحركة ونظام تغليف رسوم متحركة لمكونات واجهة المستخدم يُستخدم لتطبيق تحويلات ثلاثية الأبعاد، ومنحنيات Bezier، وانتقالات الدخول والخروج لعناصر الواجهة. يتضمن المشروع مجموعة رسوم متحركة تعتمد على التمرير لمزامنة حركات واجهة المستخدم وتأثيرات المنظر (parallax) مع موضع إطار العرض، بالإضافة إلى إطار عمل حركة SVG لتحريك المسارات، ورسم الخطوط بشكل تدريجي، واستيفاء الإحداثيات لتحويل الشكل. تغطي قدراتها مجموعة واسعة من الحركة المرئية، بما في ذلك التأثيرات المرئية ثلاثية الأبعاد مثل الدوارات الدوارة، وحركة تصور البيانات لاستيفاء الأرقام، وتجميعات الصفحات المقصودة التفاعلية. كما تدير رسومًا متحركة معقدة للمكونات للجداول والقوائم، وتوفر أدوات لتسلسل وربط الرسوم المتحركة لعناصر متعددة.

This project is a collection of experimental frontend prototypes, comprising a creative web layout gallery, a CSS user interface component library, and a visual experiment lab. It serves as an interactive animation showcase for holographic effects, audio-visual synthesis, and dynamic state transitions. The repository features specialized implementations of interactive media, including physics-based particle systems, real-time audio-visual synthesis, and an interactive sketching system. It also includes tools for content generation, such as text-based image reconstruction and a web-based prese

ScrollTrigger هي مكتبة JavaScript ومدير لأحداث التمرير في DOM مصممة لتنفيذ استدعاءات (callbacks) وتبديل فئات CSS عندما تدخل العناصر إلى إطار عرض المتصفح أو تخرج منه. تعمل كواجهة عالية المستوى لـ Intersection Observer API ونظام لبدء التحولات المرئية والمهام غير المتزامنة بناءً على موقع العنصر بالنسبة لإطار العرض. تسمح الأداة بتحديد نقاط تشغيل دقيقة باستخدام إزاحات البكسل أو النسبة المئوية للتحكم بدقة في وقت إطلاق الأحداث. وتدير الرسوم المتحركة المرئية القائمة على التمرير وعمليات التحميل الكسول (lazy loading) من خلال تتبع عتبات الرؤية. توفر المكتبة قدرات لمراقبة نشاط التمرير، مثل تتبع وقت بدء التمرير أو توقفه أو تغيير اتجاهه. كما تدعم تشغيل أحداث إطار العرض لتشغيل وظائف مخصصة أو وعود (promises) عند عبور العناصر لإحداثيات محددة.

Fixed-nav is a client-side JavaScript library for building responsive, touch-friendly navigation menus on single-page websites. It pins navigation bars to the screen viewport so control interfaces remain persistently accessible as users scroll through long content. The library automatically monitors scroll positions against document boundaries to highlight active section indicators in real time. When navigation links are selected, it animates viewport transitions to target sections using hardware-accelerated timing functions instead of abrupt jumps. Additional capabilities include dimming ba

React Parallax is a React animation component library that creates multi-speed scrolling background depth effects. It computes relative scroll positions within viewports to translate raw page offsets into normalized animation progress values, applying hardware-accelerated translation and scaling styles to DOM nodes for smooth visual movement. The library supports rendering background images and arbitrary visual elements that shift positions at different speeds relative to foreground content. It provides dynamic Gaussian blur filter transitions that interpolate based on current scroll velocity