Question 400943 in CSS Question posted in
Some basic documentation can be found here.

Css – 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.

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    The .animate css rule does not fire because it is overrruled by the #d2 rule.
    You can fix this by
    adding the !important rule to your css. In that case you can simply change your css for animate to

    .animate {
    clip-path: circle(150% at 0% 50%) !important
}
    Login or Signup to reply.
  3. 0

    I is pretty simple your css properties inside animate is getting override by css property inside #d2. The property which is getting override is clip-path: circle(150% at 0% 50%).

    To fix this issue you have add !important at the end in animate. Final css will be clip-path: circle(150% at 0% 50%) !important;.

    Below is code for same.

    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");
});
    #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%) !important;
}
    <h2>The clip-path property</h2>

<div id="d1">
  <div id="d2"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search