I have been looking and trying to solve this problem for a while now and I have no idea.

Here is my react function as it stands.

The code in bold is the function in question, right now how it works, is that the function iterates through the videos array, then positions those elements randomly, at different times due to the setInterval.

export default function RandomVideos(){
useEffect(() => {
    const videos = Array.from(document.getElementsByClassName('video_container') as HTMLCollectionOf<HTMLElement>);
    const Width = (document.getElementById('container') as HTMLElement).offsetWidth;
    const Height = (document.getElementById('container') as HTMLElement).offsetHeight;
    function fadeIn(thisVideo: HTMLElement){
        thisVideo.classList.add('fade-in');
        thisVideo.classList.remove('fade-out');  
    }
    function fadeOut(thisVideo: HTMLElement){
        thisVideo.classList.add('fade-out');
        thisVideo.classList.remove('fade-in');  
    }
    function randomlyPlaced(){
        videos.forEach(thisVideo =>  {
            setInterval(function() {
                thisVideo.classList.add("fade-in");
                const randomTop = Math.round(Math.random() * Height) - 20;
                const randomLeft = Math.round(Math.random() * Width) - 20;
                thisVideo.style.top = randomTop +"px";
                thisVideo.style.left = randomLeft +"px";
                fadeIn(thisVideo)
            }, (Math.floor(Math.random() * 7000) + 2000))
        })
    }
    randomlyPlaced()
    
});
return(
    <div className="container" id="container">
        {RandomVideosProps.map((video) => (
            <div className="video_container" key={video.id}>
                <video src={video.src}></video>
                {video.text}
            </div>
        ))}
    </div>
);}

The code works as expected, the first iterations of the video's elements fadeIn, then each interval positions itself randomly. But I want to elements to fadeOut on each interval, then fade back in. I have no idea how to do this as the interval is inside the forEach method.

Having the interval outside of the forEach method means the array elements will randomly position altogether, at once. Which is what I am trying to avoid.

So how I want this code to work - each array element fadesIn, in a random position then fadesOut and fadesIn again at another random position.

I would love any suggestions or help, I am trying to avoid using jQuery also as I know it is typically not used in react.

I have not tried using any libraries.

I am writing in a typescript react file.

Thanks!