scroll-reveal-libraries

This skill covers AOS (Animate On Scroll), a lightweight CSS-driven library for scroll-triggered animations. AOS excels at simple fade, slide, and zoom effects activated when elements enter the viewport.

Problem: AOS doesn't detect elements on first render or route changes.

Solution: Initialize in useEffect and refresh on route/content changes:

كشف الرسوم المتحركة البسيطة التي يتم تشغيلها بالتمرير باستخدام AOS (Animate On Scroll). استخدم هذه المهارة عند إنشاء صفحات تسويقية أو صفحات مقصودة أو مواقع ذات محتوى ثقيل تتطلب تأثيرات التلاشي/الشريحة الأساسية دون تنسيق معقد للرسوم المتحركة. يتم تشغيل المهام التي تتضمن رسوم متحركة للتمرير، أو الكشف عن تشغيل التمرير، أو AOS، أو الرسوم المتحركة البسيطة، أو تأثيرات التمرير الأساسية. بديل لـ GSAP ScrollTrigger وLocomotive Scroll لحالات الاستخدام الأبسط. قارن مع إطار الحركة للرسوم المتحركة الخاصة بـ React. المصدر: freshtechbro/claudedesignskills.