JS/CSS Animation Triggers Twice After First Loop - css

Question

I've been working on this carousel page (that gets started by an "enter" button from the landing page). It flips through just fine until after the first loop, after which the animations stack (until the page overloads).
It's basically an unordered list <ul> within a main <div> that lists images and videos.
IN A NUTSHELL, my animations trigger properly and my classes are transferred well during the first cycle. But by the second loop, something happens. The first page shows up properly, but the second item disappears because the animation that pulls it in is triggered twice (verified by adding an 'animationstart' console log).
THE FUNCTIONS:
Upon entry from the landing page's enterPage() function:
the first item, which is a video, is displayed and played; then
an 'ended' event listener that then triggers a flipCurrentToNext() function.
The flipCurrentToNext() function:
updates the currentPage and a nextPage variables;
pauses the currentPage if it's a video (the firstPage is a video);
adds a transition class that flips the currentPage to the left;
displays and animates the nextPage to flip into the viewport from the right;
it plays the video if it's a video, and just displays, if it's a photo;
adds an 'animationend' eventlistener to the nextPage, which then:
a) removes transition and .current-page class from flipped out currentPage;
b) adds .current-page class to nextPage;
c) updates currentPage = nextPage;
d) handles flipped in page as currentPage;
e) calls a function that autoFlip()s through the carousel.
flipLastToFirst() function does the same as No. 2, except:
nextPage is swapped with firstPage and;
the autoFlip() is not triggered because somehow the enterPage() function still triggers the video 'ended' event listener.
There are click handlers on transparent divs that users can use. I'm still not sure how I want these to override the autoFlip()s. (not really part of my question, but if you do have the answer, I'd love to know it!)
There are also other functions like flipToPrevious(), flipFirstToLast(), but they're basically the same as above.
THE CODE:
function enterPage() {
//some code that deals with the landing page
let cover = document.querySelector('.firstPage');
cover.style.display = "block";
cover.play();
cover.addEventListener('ended', () => {
flipCurrentToNext();
return;
})
return;
//I thought adding return would somehow close the eventlistener.
//I initially explored the possibility that 'ended' was also
//simultaneously calling flipToNext(), causing the
//animation overload.
}
let currentPage =
content.querySelector('.current-page');
let nextPage =
currentPage.parentElement.nextElementSibling.childNodes[1];
function autoFlip() {
currentPage = content.querySelector('.current-page');
if (currentPage.parentElement.nextElementSibling == null) {
flipLastToFirst();
} else {
flipCurrentToNext();
}
clearTimeout();
return;
}
function flipCurrentToNext() {
currentPage =
content.querySelector('.current-page');
nextPage =
currentPage.parentElement.nextElementSibling.childNodes[1];
//updates variables to stay current
if (currentPage.childNodes[1].type == "video/mp4") {
currentPage.pause();
//I suspected if this triggers the 'ended'
//eventlistener. Will it? If it does, how do I go around it?
//I couldn't figure out how to integrate
//a removeEventListener.
currentPage.currentTime = 0;
}
currentPage.classList.add('flipOutLeft')
//This transition class flips the current page out.
nextPage.style.display = "block";
nextPage.style.animation = "flipInRight 0.77s";
//THIS is the animation that gets triggered twice after
//the first loop. Then it stacks. I've console logged
//nextPage, its classes and its IDs. It is one and the same.
//
//This animation is what flips the next page into the viewport.
nextPage.addEventListener('animationend', () => {
currentPage.style.display = "none";
currentPage.classList.remove('flipOutLeft');
currentPage.classList.remove('current-page');
nextPage.classList.add('current-page');
currentPage = nextPage;
//above is an initial solution to handling fast clicks
//not final
if (currentPage.childNodes[1].type == "video/mp4") {
currentPage = content.querySelector('.current-page');
currentPage.play();
currentPage.addEventListener('ended', () => {
autoFlip(); //<--AUTOFLIP CALL for videos
return;
})
} else {
setTimeout(autoFlip, 5555); //<--for photos
}
return;
})
return;
}
//This is the CLICK handler.
flipRight.addEventListener('click', () => {
clearTimeout(autoFlip());
currentPage = content.querySelector('.current-page');
currentPage.removeEventListener('ended', flipCurrentToNext());
//I can't tell if this helped.
if (currentPage.classList.contains('lastPage') == true) {
flipLastToFirst();
} else {
flipCurrentToNext();
}
})
//I've console-logged the hell out of the code.
//I couldn't find where I'm going wrong.
//JUST IN CASE you need to see the LastToFirst function:
function flipLastToFirst() {
currentPage = content.querySelector('.current-page');
let firstPage = currentPage.parentElement.parentElement.firstElementChild.childNodes[1];
if (currentPage.childNodes[1].type == "video/mp4") {
currentPage.pause();
currentPage.currentTime = 0;
muteButton.style.visibility = "hidden";
}
currentPage.classList.add('flipOutLeft');
firstPage.style.display = "block";
firstPage.style.animation = "flipInRight 0.77s";
firstPage.addEventListener('animationend', () => {
currentPage = content.querySelector('.current-page');
currentPage.style.display = "none";
currentPage.classList.remove('flipOutLeft');
currentPage.classList.remove('current-page');
firstPage.classList.add('current-page');
currentPage = content.querySelector('.current-page');
firstPage.play();
muteButton.style.visibility = "visible";
return;
})
return;
}
.carousel__content { /*Unordered List*/
padding: 0;
margin: 0;
list-style-type: none;
overflow: hidden;
height: 100vh;
}
.carousel__page { /*List Item*/
height: 100vh;
float: left;
}
.carousel__page-item {
position: absolute;
display: none;
height: 100vh;
transition: all 0.55s ease-out;
animation: all ease-out;
animation-iteration-count: 1; /*I tried - didn't work*/
}
.flipOutLeft { /*Applied transition*/
transform: translate(-150%, 0);
opacity: 0;
#keyframes flipInRight { /*Applied animation*/
0% {transform: translate(200%, 0)};
100% {transform: translate(0, 0)};
<main>
<!--transparent navigation <buttons>-->
<div>
<ul class="carousel__content">
<li class="carousel__page">
<!--THIS VIDEO is what starts the carousel-->
<video class="carousel__video carousel__page-item
firstPage current-page" preload="auto" autoplay="true">
<source src="" type="video/mp4">
</video>
</li>
<li>
<picture class="carousel__image carousel__page-item">
<img /></picture>
</li>
<!--More are added just like this last picture.-->
</ul>
</div>
</main>
As much as I wanted to keep this short, I also didn't want to withhold relevant information. I obviously can't find the hole. I've been doing a lot of research but I feel like I simply do not see the problem properly.
I started coding a month ago and I definitely feel like I'm in over my head.
P.S. I'm 100% sure there are unnecessary lines in the code - feel free to point them out.