javascriptcsscss-animationstransitionclip-path

Clip-path animation with JavaScript doesn't work with classList but only changing style property

I made this animation using CSS and JavaScript. When I hover on the div, the background-color changes with a circle animation. This code is working:

<!DOCTYPE html>
<html lang="it">
<head>
<style>
#d1 {
  width: 300px;
  height: 300px;
  background-color: lightblue;
  position: relative;
}

#d2 {
  width: 100%;
  height: 100%;
  background-color: orange;
  clip-path: circle(0% at 0% 50%);
  transition: clip-path 0.7s ease-in-out;
}
</style>
</head>
<body>

<h2>The clip-path property</h2>

<div id="d1">
  <div id="d2"></div>
</div>

<script>
let d1 = document.getElementById("d1");
let d2 = document.getElementById("d2");

d1.addEventListener("mouseenter", function() {
  d2.style.clipPath = "circle(150% at 0% 50%)";
});

d1.addEventListener("mouseleave", function() {
  d2.style.clipPath = "circle(0% at 0% 50%)";
});
</script>

</body>
</html>

I really don't understand why this version is not working. It should be the same but it is not working. The class "animation" is added but nothing happens.

<!DOCTYPE html>
<html lang="it">
<head>
<style>
#d1 {
  width: 300px;
  height: 300px;
  background-color: lightblue;
  position: relative;
}

#d2 {
  width: 100%;
  height: 100%;
  background-color: orange;
  clip-path: circle(0% at 0% 50%);
  transition: clip-path 0.7s ease-in-out;
}

.animate {
    clip-path: circle(150% at 0% 50%)
}
</style>
</head>
<body>

<h2>The clip-path property</h2>

<div id="d1">
  <div id="d2"></div>
</div>

<script>
let d1 = document.getElementById("d1");
let d2 = document.getElementById("d2");

d1.addEventListener("mouseenter", function() {
  d2.classList.add("animate");
});

d1.addEventListener("mouseleave", function() {
  d2.classList.remove("animate");
});
</script>

</body>
</html>

Can anyone explain me why it does not work? Thanks.

Solution

  • Id Selectors have priority over classes : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

    Replace

    .animate {
    clip-path: circle(150% at 0% 50%)
}

    with :

    #d2.animate {
    clip-path: circle(150% at 0% 50%)
}


    <!DOCTYPE html>
<html lang="it">
<head>
<style>
#d1 {
  width: 300px;
  height: 300px;
  background-color: lightblue;
  position: relative;
}

#d2 {
  width: 100%;
  height: 100%;
  background-color: orange;
  clip-path: circle(0% at 0% 50%);
  transition: clip-path 0.7s ease-in-out;
}

#d2.animate {
    clip-path: circle(150% at 0% 50%)
}
</style>
</head>
<body>

<h2>The clip-path property</h2>

<div id="d1">
  <div id="d2"></div>
</div>

<script>
let d1 = document.getElementById("d1");
let d2 = document.getElementById("d2");

d1.addEventListener("mouseenter", function() {
  d2.classList.add("animate");
});

d1.addEventListener("mouseleave", function() {
  d2.classList.remove("animate");
});
</script>

</body>
</html>