improve transitions

src/App.css

@@ -40,7 +40,6 @@ main {
   height: 100%;
   display: flex;
   gap: 1em;
-  background-size: cover;
   justify-content: center;
   align-items: center;
 }
@@ -102,6 +101,8 @@ img {
 
   img {
     height: 100%;
+    animation: fadeImage 0.5s;
+    animation-fill-mode: forwards;
   }
 }
 
@@ -131,3 +132,48 @@ img {
 .overlay:hover {
   opacity: 1;
 }
+
+@keyframes fadeImage {
+  from {
+    filter: blur(5rem);
+  }
+
+  to {
+    filter: blur(0);
+  }
+}
+
+@keyframes fadeBg {
+  from {
+    opacity: 0;
+    filter: blur(5rem);
+  }
+
+  to {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+#background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+
+  img {
+    width: 100%;
+    aspect-ratio: 16/9;
+    position: absolute;
+  }
+}
+
+#current-bg {
+  z-index: -1;
+  animation: fadeBg 1s;
+  animation-fill-mode: forwards;
+}
+
+#previous-bg {
+  z-index: -2;
+}

src/App.tsx

@@ -2,7 +2,7 @@ import './defaults.css'
 import './App.css'
 import './spinner.css'
 import { MovieWall } from './objects/movie-wall'
-import { useState, useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 import tmdb from './objects/tmdb'
 import { Sidebar } from './objects/sidebar'
 import { Movie } from './objects/movie-wall'
@@ -28,36 +28,56 @@ function App() {
     page: 1
   })
   const [movies, setMovies] = useState([new MovieClass()])
-  const [backdrop, setBackdrop] = useState("")
+  const [backdrop, setBackdrop] = useState({ currImg: "", prevImg: "" })
   const [chosenMovie, setChosenMovie] = useState(new MovieClass())
-  const [loadedMovies, setLoadedMovies] = useState(0)
   const [similarMoviesAvailable, setSimilarMoviesAvailable] = useState(true)
 
   useEffect(() => { tmdb.getPopular(config, setMovies) }, [])
   useEffect(() => {
-    setLoadedMovies(movies.length)
-    if (movies[0].backdrop_path) {
-      const bgString = "linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), " + tmdb.makeBgImgUrl(chosenMovie.backdrop_path ? chosenMovie.backdrop_path : movies[0].backdrop_path)
-      setBackdrop(bgString)
+    if (chosenMovie.backdrop_path) {
+      const bgString = tmdb.makeBgImgUrl(chosenMovie.backdrop_path)
+      setBackdrop(prev => {
+        console.log("NEW PREVIMG: " + prev.currImg)
+        console.log("NE CURRIMG: " + bgString)
+        return {
+          prevImg: prev.currImg,
+          currImg: bgString
+        }
+      })
+    } else {
+      setBackdrop(prev => {
+        return {
+          ...prev,
+          currImg: tmdb.makeBgImgUrl(movies[0]?.backdrop_path ?? "")
+        }
+      })
     }
   }, [movies])
-  useEffect(() => { console.log("SIMILAR AVAILABLE: " + similarMoviesAvailable) }, [similarMoviesAvailable])
+  interface BackgroundProps extends React.ComponentPropsWithRef<"div"> {
+    currImg: string;
+    prevImg: string;
+  }
+  const Background = (props: BackgroundProps) => {
+    return <div id="background">
+      <img id="current-bg" src={props.currImg} />
+      <img id="previous-bg" src={props.prevImg} />
+    </div>
+  }
   return (
     <>
+      <Background prevImg={backdrop.prevImg} currImg={backdrop.currImg} />
       <div id="loader"></div>
-      <div className='main-container' style={{ backgroundImage: backdrop }}>
+      <div className='main-container'>
         <main >
           <Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} />
           <div id="movie-wall-container">
-            {loadedMovies === movies.length ?
             <MovieWall movies={movies}
               setMovies={setMovies}
               config={config}
               setChosenMovie={setChosenMovie}
-                setLoadedMovies={setLoadedMovies}
               setSimilarMoviesAvailable={setSimilarMoviesAvailable}
             />
-              : "LOADING  " + loadedMovies} </div>
+          </div>
         </main>
       </div>
     </>

src/objects/movie-wall.tsx

@@ -33,22 +33,18 @@ interface MovieWallProps extends React.ComponentPropsWithRef<"div"> {
   movies: Array<Movie>;
   setMovies: Function;
   setChosenMovie: Function;
-  setLoadedMovies: Function;
   setSimilarMoviesAvailable: Function;
   config: Config;
 }
 
-export function MovieWall({ movies, setMovies, config, setChosenMovie, setLoadedMovies, setSimilarMoviesAvailable }: MovieWallProps) {
+export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimilarMoviesAvailable }: MovieWallProps) {
 
   const posters: Array<React.Component> = []
   for (let i = 0; i < movies.length; i++) {
     const movie = movies[i]
-    console.log("VOTE AVG: " + movie.vote_average)
     const isHighlighted = movie.vote_average ? movie.vote_average > 6 : false
-    console.log("IS HIGHLIGHTED: " + isHighlighted)
     posters.push(
-      <Poster isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i} listSimilar={tmdb.getSimilar} config={config} setMovies={setMovies} setChosenMovie={setChosenMovie} setLoadedMovies={setLoadedMovies}
-        setSimilarMoviesAvailable={setSimilarMoviesAvailable}
+      <Poster isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i} listSimilar={tmdb.getSimilar} config={config} setMovies={setMovies} setChosenMovie={setChosenMovie} setSimilarMoviesAvailable={setSimilarMoviesAvailable}
       />
     )
   }
@@ -64,7 +60,6 @@ interface PosterProps extends React.ComponentPropsWithRef<"div"> {
   config: Config;
   setMovies: Function;
   setChosenMovie: Function;
-  setLoadedMovies: Function;
   setSimilarMoviesAvailable: Function;
   isHighlighted: boolean;
 }

src/objects/tmdb.tsx

@@ -85,15 +85,15 @@ export default {
   },
   makeBgImgUrl:
     /**
-     * Returns a complete tmdb image url formatted for css
+     * Returns a complete tmdb image url in large format
      */
     function(path: string) {
-      return "url(https://image.tmdb.org/t/p/w1280" + path + ")"
+      return "https://image.tmdb.org/t/p/w1280" + path
     },
   makeImgUrl:
     /**
     * Returns a complete tmdb img url
-    */
+#  */
     function(path: string) {
       return "https://image.tmdb.org/t/p/w500" + path
     },