IsVisible etc works but doesn't fade in and out

src/App/App.tsx

@@ -4,7 +4,7 @@ import "./mediarules.css"
 import "./Timelines.css";
 import '../App/Graph.css'; 
 import '../components/test.css'
-import '../App/LandingPage.css'
+import "./LandingPage.css"
 import "../contents/example.css"
 import "./App.scss";
 import 'beautiful-react-diagrams/styles.css';

src/App/LandingPage.css

-.base-width-height {
-    width: 75vw;
-    height: 100vh;
-  }
-  
-  .fixed-pos {
-      top: 0;
-      left: 0;
-      position: fixed;
-  }
-  
-  .fade-in-out > img {
-    opacity: 0;
-    animation: fadeIn 5s;
-  }
-  
-  .br-magenta{
-    background-color: magenta;
-  }
-  
-  .br-black{
+.content-block {
+  width:100vw;
+  height:100vh;
+  opacity: 0;
+  visibility: hidden;  
+  transition: opacity 1200ms ease-out, transform 600ms ease-out,
+  visibility 1200ms ease-out;
+  will-change: opacity, visibility;
+  background-color: black;
+}
+
+.content-block.is-visible {
+    opacity: 1;
+    transform: none;
+    visibility: visible;
     background-color: black;
-  }
-  
-  @keyframes fadeIn {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
-  }
\ No newline at end of file
+}
\ No newline at end of file

src/components/landingpage/ContentBlock.tsx

+import React from 'react';
+
 export function ContentBlock({file}:{file: string}) {
+    const [isVisible, setVisible] = React.useState(false);
+    const domRef = React.useRef(null)!;
+    React.useEffect(() => {
+      const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible(entry.isIntersecting));
+      });
+      observer.observe(domRef.current!);
+    }, []);
+    
+
     return(
-        <div className="row col base-width-height">
+        <div className={`content-block${isVisible ? 'is-visible' : ''}`}
+        ref={domRef}>
             {
                 <img src={file}></img>
             }

src/contents/Home.tsx

-import { ContentBlock } from "../components/landingpage/ContentBlock";
+import React from "react";
 
 export function Home() {  
+  const [isVisible, setVisible] = React.useState(false);
+    const domRef = React.useRef(null)!;
+    React.useEffect(() => {
+      const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible(entry.isIntersecting));
+        entries.forEach(entry => console.log(entry.isIntersecting));
+      });
+      observer.observe(domRef.current!);
+    }, []);
   return (
     <>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/firstperson.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/firstbreathin.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/firstbreathoutrelease.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/firstbreathoutdone.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/revitalized.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/breathdeepin.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/breathhold.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/holdbad.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/holdpanic.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/holdrelief.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/holdreliefdone.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/privilage.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/threecircles.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/threepeople.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/blockedairway.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/infection.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/maskpsych.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/fear.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/twenty.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/oneintwenty.webp"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/treatmentnoloop.gif"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/precyse.gif"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/airbuddy.gif"></ContentBlock>
-      <ContentBlock file="https://static.igem.wiki/teams/5247/landing/primeguide.webp"></ContentBlock>
-    </>
+    <div className={`content-block${isVisible ? '.is-visible' : ''}`}
+        ref={domRef}>
+                <img src="https://static.igem.wiki/teams/5247/landing/firstperson.webp"></img>
+        </div>
+      </>
   );
 }