كيفية إستخدام مكتبة AOS في React

تأكد من إستيراد التنسيقات هكذا حيث لم تقم بتضمينها :

import AOS from "aos";
import "aos/dist/aos.css";

بعد ذلك تأكد من وضع الكود التالي في useEffect :

useEffect(() => {
  AOS.init();
  AOS.refresh();
}, []);

إذا إستمرت المشكلة قم بإرفاق ملف المشروع للإطلاع عليه.

نجحت اصبح تعمل لكن عند تمرير لا تعمل فقط عند تحديث 

بتاريخ 55 دقائق مضت قال Hxfhf Ucicic:

نجحت اصبح تعمل لكن عند تمرير لا تعمل فقط عند تحديث 

عليك تعطيل خاصية once فالإعداد الافتراضي لـ once في مكتبة AOS هو true، بمعنى الأنيميشن يحدث مرة واحدة فقط عند أول ظهور للعنصر، وعند التمرير مرة أخرى لا يحدث شيء، قم بتعديل الكود للتالي:

  useEffect(() => {
    AOS.init({
      duration: 1000,
      once: false, 
    });
  }, []);

و duration: 1000 ستجعل الحركة أبطأ وسلسة أكثر.