I am currently working on a media player project where I have implemented a scrolling marquee effect for the song meta information using JavaScript and CSS. The scrolling effect only occurs when the track is playing, and I achieve this by adding/removing the animation class through JavaScript when the play/pause button is pressed. However, I am facing an issue where if the animation class is removed in the middle of the scroll, it stops abruptly. Is there a way to let the animation complete before stopping when the class is removed?
var MetaScroll = document.getElementById("MetaScroll");
var PlayButton = document.getElementById("PlayButton");
function playPause() {
MetaScroll.classList.toggle('scrolling');
PlayButton.classList.toggle('fa-play');
PlayButton.classList.toggle('fa-pause');
}body {
background: black;
}
.albumArt {
width: 200px;
height: 200px;
border: 3px solid #212121;
display: flex;
flex-direction: column-reverse;
}
.metaContainer {
height: 25%;
overflow: hidden;
background-color: white;
}
.meta {
white-space: nowrap;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.meta p {
font-family: Courier, monospace;
font-size: 20px;
margin: 0;
color: black;
}
.scrolling {
transform: translateX(0);
animation: b-text-scroll 5s linear infinite;
}
@keyframes b-text-scroll {
0% {
transform: translate3d(0, 0, 0);
}
20% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.pIcons {
font-size: 20px;
color: white;
background-color: transparent;
border: none;
}<script src="https://kit.fontawesome.com/1706aa300d.js" crossorigin="anonymous"></script>
<body>
<div class="albumArt">
<div class="metaContainer">
<div id="MetaScroll" class="meta">
<p> The Absense of a Title - A Deadly Lack of Artist</p>
<p> The Absense of a Title - A Deadly Lack of Artist</p>
</div>
</div>
</div>
<button class="pIcons" onclick="playPause()">
<i id="PlayButton" class="fa-solid fa-play"></i>
</button>
</body>