diff --git a/src/App/App.tsx b/src/App/App.tsx
index 8e83db9338198cac0c7f5afb192a9016f26b6e57..9b1bfc5df8c193f89db801c115279c382edeedc3 100644
--- a/src/App/App.tsx
+++ b/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';
diff --git a/src/App/LandingPage.css b/src/App/LandingPage.css
index 7754eb3c20335a097953a3c1458896a2d072d8de..7a8334463ac6834ede432c62c9fd48506161e894 100644
--- a/src/App/LandingPage.css
+++ b/src/App/LandingPage.css
@@ -1,28 +1,17 @@
-.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
diff --git a/src/components/landingpage/ContentBlock.tsx b/src/components/landingpage/ContentBlock.tsx
index d3adbb675048408377f61c5eb62d7756f2d19481..6736b4a7405f76e5a3c789a5d789c0487e6b273e 100644
--- a/src/components/landingpage/ContentBlock.tsx
+++ b/src/components/landingpage/ContentBlock.tsx
@@ -1,6 +1,19 @@
+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>
             }
diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx
index 388390372f9769f6d7fc472085a019d35490f456..96767c40d749315814dffc72b452c374fe65b261 100644
--- a/src/contents/Home.tsx
+++ b/src/contents/Home.tsx
@@ -1,32 +1,21 @@
-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>
+      </>
   );
 }