MarleaM/OffBeets

Animations do not work on certain displays

Open

#2 opened on Nov 21, 2024

 (0 comments) (0 reactions) (0 assignees)Python (1 fork)auto 404
CSSFrontendgood first issue

Repository metrics

Stars
 (3 stars)
PR merge metrics
 (PR metrics pending)

Description

Our current animations (sliding fade-in) work on a majority of displays, but on a select few, they do not load.

Gets Called By: SongRows.tsx File location: Anti-Spotify/frontend/src/App.css Code location: Lines 375. Sample is pasted below.

/* animation */

@keyframes song-fade-in-animation {
    0% {
      opacity: 0;
      transform: translateY(30px) scale(0.9);
    }
    100% { 
      opacity: 1;
      transform: translateY(0px) scale(1);
    }
}

@keyframes navbar-fade-down-animation {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% { 
    opacity: 1;
    transform: translateY(0px);
  }
}

.song-fade-in {
  animation: song-fade-in-animation linear;
  animation-timeline: view();
  animation-range-start: cover;
  animation-range-end: 400px;
}

.main-song-fade-in {
  animation: song-fade-in-animation .4s; 
}

.navbar-fade-down{
  animation: navbar-fade-down-animation .9s;
}

We have a suspicion that this may be due to the use of the methods called in .song-fade-in.

Contributor guide