Styjun

Im making a website where users can personalize their pizza. If the button deliverPizzaButton is clicked I want to redirect the user to another html page where an animation will be played which will let them know the pizza is on their way.

This is what I have now in my javascript, it is redirecting to the second HTML but the animation does not play in the second html

var pizzaDelivererImg = document.getElementById('pizzaDeliverer');


function changeHTML() 
 if (deliverPizzaButton.classList == ('readyToDeliver')) // when all the steps are completed the button will change color and the button can be clicked
 window.location.href = 'pizzaAnimation.html';
 playAnimation();
 


deliverPizzaButton.addEventListener('click', changeHTML);

function playAnimation() 
 if (window.location.href == 'pizzaAnimation.html') 
 pizzaDelivererImg.classList.add('letTheDelivererDrive');
 

CSS:

.letTheDelivererDrive 
 animation: animationFrames ease-in-out 4s;
 animation-iteration-count: 1;
 transform-origin: 50% 50%;
 animation-fill-mode: forwards;
 /*when the spec is finished*/
 -webkit-animation: animationFrames ease-in-out 4s;
 -webkit-animation-iteration-count: 1;
 -webkit-transform-origin: 50% 50%;
 -webkit-animation-fill-mode: forwards;
 /*Chrome 16+, Safari 4+*/
 -moz-animation: animationFrames ease-in-out 4s;
 -moz-animation-iteration-count: 1;
 -moz-transform-origin: 50% 50%;
 -moz-animation-fill-mode: forwards;
 /*FF 5+*/
 -o-animation: animationFrames ease-in-out 4s;
 -o-animation-iteration-count: 1;
 -o-transform-origin: 50% 50%;
 -o-animation-fill-mode: forwards;
 /*Not implemented yet*/
 -ms-animation: animationFrames ease-in-out 4s;
 -ms-animation-iteration-count: 1;
 -ms-transform-origin: 50% 50%;
 -ms-animation-fill-mode: forwards;
 /*IE 10+*/


@keyframes animationFrames 
 0% 
 transform: translate(-355px, -31px);
 
 100% 
 transform: translate(309px, -26px);
 


@-moz-keyframes animationFrames 
 0% 
 -moz-transform: translate(-355px, -31px);
 
 100% 
 -moz-transform: translate(309px, -26px);
 


@-webkit-keyframes animationFrames 
 0% 
 -webkit-transform: translate(-355px, -31px);
 
 100% 
 -webkit-transform: translate(309px, -26px);
 


@-o-keyframes animationFrames 
 0% 
 -o-transform: translate(-355px, -31px);
 
 100% 
 -o-transform: translate(309px, -26px);
 


@-ms-keyframes animationFrames 
 0% 
 -ms-transform: translate(-355px, -31px);
 
 100% 
 -ms-transform: translate(309px, -26px);
 

HTML 1 (index.html) (where the button will be clicked to redirect):

<img id="pizzaDeliverer" src="img/pizzadeliverer.png" alt="pizza deliverer">

HTML 2 (pizzaAnimation.html) (where the animation will be played):

it is linked to the same css and script as in index.html

<img id="pizzaDeliverer" src="img/pizzadeliverer.png" alt="pizza deliverer">

The problem is you're trying to run code after the browser has been told to unload the current page and head to another one.

 window.location.href = 'pizzaAnimation.html';
 playAnimation(); //<-- this won't happen because of ^^

So in effect you're telling it to play the animation on the first page, not the second one. What you need to do instead is modify the JS to act onload for the second page, and then run the animation.

function playAnimation() 
 pizzaDelivererImg.classList.add('letTheDelivererDrive');

if (window.location.href == 'pizzaAnimation.html') playAnimation();

Also note that

deliverPizzaButton.classList == ('readyToDeliver')

...is not a proper, scalable implementation of classList. Better would be:

deliverPizzaButton.classList.contains('readyToDeliver')