CODEWITHSUNDEEP
jquerycssanimation
Anthony M
Anthony M

Reputation: 51

Why is my animated div moving diagonally?

I am trying to animate my web page by having a pair of curtains open to the side. I have achieved this result using CSS and by moving the position of the divs off the screen. However, when I program a button to toggle the animation state from paused to running, the divs move diagonally off screen AND fade while doing so. Why? 

#curtainLeft{
position: absolute;
z-index: 3;
top:0;
left: -1000px;
height:100%;
animation-name:left;
animation-duration: 1.5s;
animation-play-state: paused;

}
@keyframes left {
from {left: 0px;}
to {left: -1000px;}
}

#curtainRight{
position:absolute;
z-index: 3;
top:0;
right:-1000px;
animation-name:right;
animation-duration: 1.5s;
animation-play-state: paused;

}
@keyframes right {
from {right: 0px;}
to {right: -1000px;}
}

.runAnimation{
animation-play-state: running;
}


<button id="directionsButton" onclick="myFunction()">Begin</button>
</div>
<div id="curtainLeft">
    <img src="./assets/images/curtainLeft.png">
</div>
<div id="curtainRight">
    <img src="./assets/images/curtainRight.png">
</div>



function myFunction(){

$("#curtainRight").toggle("runAnimation");
$("#curtainLeft").toggle("runAnimation")
$("#directionsButton").remove();
audio.play();
}

Upvotes: 1

Views: 83

Answers (1)

Cheslab
Cheslab

Reputation: 1924

First, I thought it's a bug, but then I noticed, that runAnimation class was never assigned to the divs, and then I saw that the animation itself was completely handled by js. The answer is very simple. You misused .toggle() - its function to hide/show elements, .toggleClass() is what you want.

You'll also need to add !important for animation-play-state: running cause it is a style for a class and animation-play-state: paused; is a style for an id which has a higher priority. Or you can write it like #curtainLeft.runAnimation {...} then it will have even higher priority and you won't need !important. And obviously it's a good idea to wrap your curtains into a common parent that will have overflow: hidden; and probably pointer-events: none;. I just used body in the snippet

$('#directionsButton').click(() => {
  $("#curtainRight").toggleClass("runAnimation");
  $("#curtainLeft").toggleClass("runAnimation")
  $("#directionsButton").remove();
});
body {overflow: hidden;}

#curtainLeft,
#curtainRight {
  height: 100%;
  width: 50%;
  position: absolute;
  z-index: 3;
  top: 0;
  animation-duration: 1.5s;
  animation-play-state: paused;
}

#curtainLeft {
  left: -1000px;
  background: firebrick;
  animation-name: left;
}

#curtainRight {
  right: -1000px;
  background: rebeccapurple;
  animation-name: right;
}

#directionsButton {
  position: absolute;
  left: 10px;
  right: 10px;
  z-index: 10000;
}

.runAnimation {
  animation-play-state: running !important;
}

@keyframes left {
  from {left: 0;}
  to {left: -1000px;}
}

@keyframes right {
  from {right: 0;}
  to {right: -1000px;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="directionsButton">Begin</button>
<div id="curtainLeft"></div>
<div id="curtainRight"></div>

Upvotes: 1

Related Questions