the current scrolling animation looks good but not as expected because when scrolled to the end it go back to the top and starts again i wanted like an loops goes to the top and comes from bottom currently when i scroll when the scrollbar reaches the end it flickers back to the top. i have already done a similar animation loop using react swiper i was able to swipe and change the autoscrolling direction i have provided you some basic part of that code check below for refrence but the below which might help you implement, and the provided swiper swips/autoscrolls horizontally and currnly on the announcement i need vertical loop scrol

<div className="OtherPrayerContainer" style={{ marginTop: "10px" }}> <div className="OtherPrayer" ref={containerRef}> {specialPrayerData?.length !== 0 && !isOverflowing ? ( <div style={{ display: "flex", padding: "10px" }}> {specialPrayerData?.map((timing, index) => ( <div className="special-prayer-card" data-testid={`special-prayer-card-${index}`} style={{ marginLeft: index === 0 ? "0px" : "10px" }} > <div className="box"> <b data-testid={`special-prayer-name-${index}`}> {timing.name} </b>

                  <div
                    className="WidgetSpecialTimingBox"
                    style={!timing.azaanTime ? { gap: "0" } : {}}
                  >
                    <div className="WidgetSpecialTiming">
                      <span
                        style={
                          !timing.azaanTime
                            ? { display: "none", gap: "0" }
                            : {}
                        }
                      >
                        <img src={icons["Azaan"]} alt="" />
                        <b data-testid={`special-prayer-azaan-${index}`}>
                          {" "}
                          {/* Added data-testid for Azaan time */}
                          {timing.azaanTime
                            ? timeZoneHandler(timing.azaanTime)
                            : "---"}
                        </b>
                      </span>
                    </div>
                    <div className="WidgetSpecialTiming">
                      <span>
                        <img src={icons["Iqama"]} alt="" />
                        <b data-testid={`special-prayer-jamaat-${index}`}>
                          {" "}
                          {/* Added data-testid for Jamaat time */}
                          {timeZoneHandler(timing.jamaatTime)}
                        </b>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : specialPrayerData?.length !== 0 ? (
          <Swiper
            modules={[Autoplay, FreeMode]}
            spaceBetween={10}
            slidesPerView={"auto"}
            loop={true}
            // freeMode={{
            //   enabled: true,
            //   momentum: true,
            //   momentumBounce: false,
            // }}
            speed={4000}
            autoplay={{
              delay: 0,
              disableOnInteraction: false,
              pauseOnMouseEnter: false,
              reverseDirection: false,
            }}
            allowTouchMove={true}
            className="py-4"
            onSwiper={(swiper) => (swiperRef.current = swiper)}
            // preventInteractionOnTransition
            // onMouseEnter={() => {
            //   console.log("mouse enter");

            //   // if (swiperRef.current && isPlaying) {
            //   swiperRef.current.autoplay.stop();
            //   // }
            // }}
            // onMouseLeave={() => {
            //   console.log("mouse leave");
            //   // if (swiperRef.current && isPlaying) {
            //   swiperRef.current.autoplay.start();
            //   // }
            // }}
            style={
              specialPrayerData?.length === 1
                ? { marginLeft: 0, padding: "10px" }
                : { padding: "10px" }
            }
          >
            {content?.map((timing, index) => (
              <SwiperSlide
                className="special-prayer-card"
                key={index}
                data-testid={`special-prayer-card-${index}`}
                style={{ width: "200px", cursor: "pointer" }}
              >
                <div className="box">
                  <b>{timing.name}</b>
                  <div
                    className="WidgetSpecialTimingBox"
                    style={!timing.azaanTime ? { gap: "0" } : {}}
                  >
                    <div className="WidgetSpecialTiming">
                      {" "}
                      <span
                        style={
                          !timing.azaanTime
                            ? { display: "none", gap: "0" }
                            : {}
                        }
                      >
                        <img src={icons["Azaan"]} alt="" />
                        <b>
                          {timing.azaanTime
                            ? timeZoneHandler(timing.azaanTime)
                            : "---"}
                        </b>
                      </span>
                    </div>
                    <div className="WidgetSpecialTiming">
                      <span>
                        <img src={icons["Iqama"]} alt="" />
                        <b>{timeZoneHandler(timing.jamaatTime)}</b>
                      </span>
                    </div>
                  </div>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        ) : (
          // </Swiper>
          <div className="notavailableSalah">
            <div className="no_other_salah">
              <img src={noPrayer} alt="" style={{ width: "120px" }} />
              <p>No Other Salah Prayers</p>
            </div>
          </div>
        )}
      </div>

const containerRef = useRef(null); const [isOverflowing, setIsOverflowing] = useState(false); const [isPlaying, setIsPlaying] = useState(true); const swiperRef = useRef<SwiperType | null>(null);

const [content, setContent] = useState([]); const toggleAutoplay = () => { setIsPlaying(!isPlaying); };

useEffect(() => { if (swiperRef.current) { if (isPlaying) { swiperRef.current.autoplay.start(); } else { swiperRef.current.autoplay.stop(); } } }, [isPlaying]);

useEffect(() => { const checkOverflow = () => { if (containerRef.current && specialPrayerData) { const containerWidth = containerRef.current.offsetWidth; const WidthOfOneDiv = isLargeMobile ? 180 + 10 : 170 + 10; const contentWidth = specialPrayerData.length * WidthOfOneDiv + 10; setIsOverflowing(contentWidth > containerWidth); } };

checkOverflow();
window.addEventListener("resize", checkOverflow);

return () => {
  window.removeEventListener("resize", checkOverflow);
};

}, [containerRef.current, specialPrayerData?.length]);