Javascript and css animation

Question

How can I make an animation? When I press a button like Monday, the object with the correct color will move down, and if it is not the button pressed like "Tuesday" the previous object will move up and the correct object will move down. Thank you in advance

Here is the example of code..

function myFunction(myColor) {
  const square_day = document.getElementById("square")
  switch (myColor) {
    case "Monday":
      square_day.style.borderColor = "#ff7f98";
      square_day.style.backgroundColor = "#ff7f9880";
      square_day.style.animation = "square-to-circle 1s .83s"
      break
    case "Tuesday":
      square_day.style.borderColor = "#d7d77b";
      square_day.style.backgroundColor = "#d7d77b80";
      square_day.style.animation = "square-to-circle 1s .83s"
      break
  }

#square {
  height: 500px;
  width: 500px;
  position: relative;
  border-style: solid;
  border: 10px solid;
  background-color: grey;
  margin-left: auto;
  margin-right: auto;
  border-color: black;
  top: -700px;
}

@keyframes square-to-circle {
  0% {
    top: -700px
  }
  100% {
    top: 0px;
  }
}

<div class="container">
  <div id="button-container">
    <div class="button-group">
      <button class="button" id="Monday" value="Monday" onclick="myFunction(this.value)">Monday</button>
      <button class="button" id="Tuesday" value="Tuesday" onclick="myFunction(this.value)">Tuesday</button>
      <button class="button" id="Wednesday" value="Wednesday" onclick="myFunction(this.value)">Wednesday</button>
      <button class="button" id="Thursday" value="Thursday" onclick="myFunction(this.value)">Thursday</button>
      <button class="button" id="Friday" value="Friday" onclick="myFunction(this.value)">Friday</button>
      <button class="button" id="Saturday" value="Saturday" onclick="myFunction(this.value)">Saturday</button>
      <button class="button" id="Sunday" value="Sunday" onclick="myFunction(this.value)">Sunday</button>
    </div>
  </div>
  <div id="square-container">
    <div id="square">
    </div>
  </div>
</div>

Your function is missing a closing bracket } that immediately crashes the code on run. — Jeremy Thille
– Jeremy Thille, Commented Jun 5, 2021 at 14:41
Thanks Jeremy. Apologies, I think am unable to edit it but this is a sample code only. not all codes was paste here. would you know how to animate? Thank you — nekim321
– nekim321, Commented Jun 5, 2021 at 14:52
You should fix the code you provided, so your example reflects what you are trying to improve. If your code crashes from the start, there's no way to work on the animation. There's an "edit" button underneath — Jeremy Thille
– Jeremy Thille, Commented Jun 5, 2021 at 14:54
I would insert your animation stylesheet in css and toggle them with javascript — niko
– niko, Commented Jun 5, 2021 at 15:12

Justin · Accepted Answer · 2021-06-05 21:03:07Z

I wasn't sure if you planned on only using the one square or adding one for each day. It appeared you would have one for each day since you had it in a container. Here's an answer using one for each day.

function myFunction(myColor) {
  const squares = document.getElementsByClassName("square");

  for (let i = 0; i < squares.length; i++) {
    if (myColor == squares[i].id) {
      squares[i].style.transform = "translate(-50%, 20px)";
    } else {
      squares[i].style.transform = "translate(-50%, -700px)";
    }
    switch (myColor) {
      case "Monday":
        squares[0].style.borderColor = "#ff7f98";
        squares[0].style.backgroundColor = "#ff7f9880";
        break;
      case "Tuesday":
        squares[1].style.borderColor = "#d7d77b";
        squares[1].style.backgroundColor = "#d7d77b80";
        break;
      case "Wednesday":
        squares[2].style.borderColor = "purple";
        squares[2].style.backgroundColor = "violet";
        break;
      case "Thursday":
        squares[3].style.borderColor = "forestgreen";
        squares[3].style.backgroundColor = "green";
        break;
      case "Friday":
        squares[4].style.borderColor = "darkorange";
        squares[4].style.backgroundColor = "orange";
        break;
      case "Saturday":
        squares[5].style.borderColor = "blue";
        squares[5].style.backgroundColor = "lightblue";
        break;
      case "Sunday":
        squares[6].style.borderColor = "red";
        squares[6].style.backgroundColor = "pink";
        break;
    }
  }
}

.square {
  height: 500px;
  width: 500px;
  position: absolute;
  left: 50%;
  border-style: solid;
  border: 10px solid;
  background-color: grey;
  border-color: black;
  z-index: -1;
  transform: translate(-50%, -700px);
  transition: all 1s;
}

<div class="container">
  <div id="button-container">
    <div class="button-group">
      <button class="button" id="Monday" value="Monday" onclick="myFunction(this.value)">Monday</button>
      <button class="button" id="Tuesday" value="Tuesday" onclick="myFunction(this.value)">Tuesday</button>
      <button class="button" id="Wednesday" value="Wednesday" onclick="myFunction(this.value)">Wednesday</button>
      <button class="button" id="Thursday" value="Thursday" onclick="myFunction(this.value)">Thursday</button>
      <button class="button" id="Friday" value="Friday" onclick="myFunction(this.value)">Friday</button>
      <button class="button" id="Saturday" value="Saturday" onclick="myFunction(this.value)">Saturday</button>
      <button class="button" id="Sunday" value="Sunday" onclick="myFunction(this.value)">Sunday</button>
    </div>
  </div>
  <div id="square-container">
    <div class="square" id="Monday"></div>
    <div class="square" id="Tuesday"></div>
    <div class="square" id="Wednesday"></div>
    <div class="square" id="Thursday"></div>
    <div class="square" id="Friday"></div>
    <div class="square" id="Saturday"></div>
    <div class="square" id="Sunday"></div>
  </div>
</div>

EDIT: Adding another option for just using one square element

const square = document.getElementById("square");

function myFunction(myColor) {
  const squareBounds = square.getBoundingClientRect();
  if (squareBounds.top < 0) {
    changeColor(myColor);
  } else {
    square.style.transform = "translate(-50%, -700px)";
    setTimeout(changeColor, 500, myColor);
  }
}

function changeColor(myColor) {
  switch (myColor) {
    case "Monday":
      square.style.borderColor = "#ff7f98";
      square.style.backgroundColor = "#ff7f9880";
      break;
    case "Tuesday":
      square.style.borderColor = "#d7d77b";
      square.style.backgroundColor = "#d7d77b80";
      break;
    case "Wednesday":
      square.style.borderColor = "purple";
      square.style.backgroundColor = "violet";
      break;
    case "Thursday":
      square.style.borderColor = "forestgreen";
      square.style.backgroundColor = "green";
      break;
    case "Friday":
      square.style.borderColor = "darkorange";
      square.style.backgroundColor = "orange";
      break;
    case "Saturday":
      square.style.borderColor = "blue";
      square.style.backgroundColor = "lightblue";
      break;
    case "Sunday":
      square.style.borderColor = "red";
      square.style.backgroundColor = "pink";
      break;
  }
  setTimeout(dropDown, 500, square);
}

function dropDown(square) {
  square.style.transform = "translate(-50%, 20px)";
}

.square {
  height: 500px;
  width: 500px;
  position: absolute;
  left: 50%;
  border-style: solid;
  border: 10px solid;
  background-color: grey;
  border-color: black;
  z-index: -1;
  transform: translate(-50%, -700px);
  transition: all 1s;
}

<div class="container">
  <div id="button-container">
    <div class="button-group">
      <button class="button" id="Monday" value="Monday" onclick="myFunction(this.value)">Monday</button>
      <button class="button" id="Tuesday" value="Tuesday" onclick="myFunction(this.value)">Tuesday</button>
      <button class="button" id="Wednesday" value="Wednesday" onclick="myFunction(this.value)">Wednesday</button>
      <button class="button" id="Thursday" value="Thursday" onclick="myFunction(this.value)">Thursday</button>
      <button class="button" id="Friday" value="Friday" onclick="myFunction(this.value)">Friday</button>
      <button class="button" id="Saturday" value="Saturday" onclick="myFunction(this.value)">Saturday</button>
      <button class="button" id="Sunday" value="Sunday" onclick="myFunction(this.value)">Sunday</button>
    </div>
  </div>
  <div id="square-container">
    <div class="square" id="square"></div>
  </div>
</div>

EDIT: Adding alpha to background

let m = { Monday: 0, alpha: 0 };
let t = { Tuesday: 0, alpha: 0 };
let w = { Wednesday: 0, alpha: 0 };
let th = { Thursday: 0, alpha: 0 };
let f = { Friday: 0, alpha: 0 };
let s = { Saturday: 0, alpha: 0 };
let su = { Sunday: 0, alpha: 0 };
let arr = [m, t, w, th, f, s, su];

function myFunction(myColor) {
  const squares = document.getElementsByClassName("square");
  for (let i = 0; i < squares.length; i++) {
    if (myColor == squares[i].id) {
      squares[i].style.transform = "translate(-50%, 20px)";
    } else {
      squares[i].style.transform = "translate(-50%, -700px)";
    }
    if (arr[i].hasOwnProperty(myColor)) {
      arr[i].alpha = 0;
    } else {
      arr[i].alpha = 1;
    }

    switch (myColor) {
      case "Monday":
        squares[0].style.borderColor = "#ff7f98";
        squares[0].style.backgroundColor = "rgba(0, 150, 15," + m.alpha + ")";
      case "Tuesday":
        squares[1].style.borderColor = "#d7d77b";
        squares[1].style.backgroundColor = "rgba(0, 255, 255," + t.alpha + ")";
      case "Wednesday":
        squares[2].style.borderColor = "purple";
        squares[2].style.backgroundColor = "rgba(190, 0, 237," + w.alpha + ")";
      case "Thursday":
        squares[3].style.borderColor = "forestgreen";
        squares[3].style.backgroundColor = "rgba(0, 150, 15," + th.alpha + ")";
      case "Friday":
        squares[4].style.borderColor = "darkorange";
        squares[4].style.backgroundColor = "rgba(209, 160, 0," + f.alpha + ")";
      case "Saturday":
        squares[5].style.borderColor = "blue";
        squares[5].style.backgroundColor = "rgba(38, 237, 255," + s.alpha + ")";
      case "Sunday":
        squares[6].style.borderColor = "red";
        squares[6].style.backgroundColor = "rgba(255, 77, 249," + su.alpha + ")";
    }
  }
}

.square {
  height: 500px;
  width: 500px;
  position: absolute;
  left: 50%;
  border-style: solid;
  border: 10px solid;
  border-color: black;
  z-index: -1;
  transform: translate(-50%, -700px);
  transition: all 2s;
}

<div class="container">
  <div id="button-container">
    <div class="button-group">
      <button class="button" id="Monday" value="Monday" onclick="myFunction(this.value)">Monday</button>
      <button class="button" id="Tuesday" value="Tuesday" onclick="myFunction(this.value)">Tuesday</button>
      <button class="button" id="Wednesday" value="Wednesday" onclick="myFunction(this.value)">Wednesday</button>
      <button class="button" id="Thursday" value="Thursday" onclick="myFunction(this.value)">Thursday</button>
      <button class="button" id="Friday" value="Friday" onclick="myFunction(this.value)">Friday</button>
      <button class="button" id="Saturday" value="Saturday" onclick="myFunction(this.value)">Saturday</button>
      <button class="button" id="Sunday" value="Sunday" onclick="myFunction(this.value)">Sunday</button>
    </div>
  </div>
  <div id="square-container">
    <div class="square" id="Monday"></div>
    <div class="square" id="Tuesday"></div>
    <div class="square" id="Wednesday"></div>
    <div class="square" id="Thursday"></div>
    <div class="square" id="Friday"></div>
    <div class="square" id="Saturday"></div>
    <div class="square" id="Sunday"></div>
  </div>
</div>

Thank you so much Justin. This is the code I am looking for.. :)
if I want to animate the opacity of the background color from 100% to 0%(white) can I do that? border color will still be the same. Thank you
When do you want it to happen? As it’s leaving the viewport? While it’s coming back onto the viewport? After it settles down onto the viewport?
Yes Justin... when moving down the opacity of the background color will be 0 then when it moves up the opacity is 100%.. Thank you Justin
Ok also did you go with the first or second snippet I provided?

Collectives™ on Stack Overflow

Javascript and css animation

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related