clip-path bounces at the top due to offset in Javascript?

Question

I have created a hover effect like whenever you hover on the box you will see a circle (actually it is a div with position: absolute whose clip-path position is controlled by Javascript offset) and when this circle reaches the second paragraph element it jumps to the top. So I wanna know why it's happening and how to make the circle move consistently throughout the box without giving a jerk or moving to the top.

Here is my code

let container = document.querySelector(".container")
let secondDiv = document.querySelector(".test")

secondDiv.addEventListener("mousemove",function(e){
   secondDiv.style.setProperty("--x",e.offsetX + "px")
   secondDiv.style.setProperty("--y",e.offsetY + "px")
   //console.log(e.offsetX)
})

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
.container{
  width:70%;
  margin: 0 auto;
  border:2px solid red;
  height:150px;
  position:relative;
  background: #9F86C0;
  color:white;
  margin-top: 10%;
}
.container p{
  font-size:2.3em;
}
.container .content{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height:150px;
  padding:1em;
}
.container .content:nth-child(2){
  background: #E0B1CB;
  color:white;
  clip-path:circle(50px at var(--x) var(--y))
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="content check">
      <p>Hello People hover me</p>
      <p>What's going on?</p>
    </div>
    <div class="content test">
      <p>Hello People hover me</p>
      <p>What's going on?</p>
    </div>
  </div>
</body>
</html>

consider pageX/pageY instead: https://stackoverflow.com/a/63228033/8620333 — Temani Afif, Jun 20 '21 at 10:37
or check this too: https://stackoverflow.com/q/49793312/8620333 — Temani Afif, Jun 20 '21 at 10:38

m4n0 · Accepted Answer · 2021-06-20T12:53:23.340

1

Since there are two paragraphs in place, the mouse movement triggers to choose the paragraph over the parent. You can choose to turn off the trigger using pointer-events: none on the paragraph elements.

let container = document.querySelector(".container")
let secondDiv = document.querySelector(".test")

container.addEventListener("mousemove", function(e) {
  secondDiv.style.setProperty("--x", e.offsetX + "px")
  secondDiv.style.setProperty("--y", e.offsetY + "px")
  //console.log(e.offsetX)
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

.container {
  width: 70%;
  margin: 0 auto;
  border: 2px solid red;
  height: 150px;
  position: relative;
  background: #9F86C0;
  color: white;
  margin-top: 10%;
}

.container p {
  font-size: 2.3em;
  pointer-events: none; /* Added */
}

.container .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  padding: 1em;
}

.container .content:nth-child(2) {
  background: #E0B1CB;
  color: white;
  clip-path: circle(50px at var(--x) var(--y))
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="content check">
      <p>Hello People hover me</p>
      <p>What's going on?</p>
    </div>
    <div class="content test">
      <p>Hello People hover me</p>
      <p>What's going on?</p>
    </div>
  </div>
</body>

</html>

edited Jun 20 '21 at 12:53

answered Jun 20 '21 at 10:47

m4n0

29,823
27
76
89

Thanks a lot for this answer I have some confusions first one is that like I have to hover on the circle in order to move it along with the cursor I wanna know that how to make the circle follow my cursor and second question is that if I am moving the cursor very rapidly the cursor comes out of that circle and stops so how do I make that circle to follow my cursor. Thanks again for your answer :) – Shayan Kanwal Jun 20 '21 at 10:59
Hey Shayan, can you please open a new question? This way, we can stop mixing things up and I can get a better picture of what you are asking. – m4n0 Jun 20 '21 at 11:19
is it fine that I will ask a different question with the same code – Shayan Kanwal Jun 20 '21 at 11:21
Yes, It's totally fine. – m4n0 Jun 20 '21 at 11:28
1

Ok once I post the question then I will send you the link. and remember my name is Shayan Kanwal if the question appears in the question log haha :) – Shayan Kanwal Jun 20 '21 at 11:33
Here is the link of the question https://stackoverflow.com/questions/68055778/cursor-moves-out-of-clip-path-circle-if-moves-very-rapidly – Shayan Kanwal Jun 20 '21 at 12:21
@ShayanKanwal sorry but it's not fine to ask another question for the same issue. A different question mean a different issue and actually you asked another one related to this answer which is related to same issue. Edit your question to add more details or wait for more accurate answers – Temani Afif Jun 20 '21 at 12:42
@ShayanKanwal Let me know if adding the event listener to the container solves your issue. Is it fine now? – m4n0 Jun 20 '21 at 12:54
@m4n0 Yes by giving the event listener to the container worked for me – Shayan Kanwal Jun 21 '21 at 10:53
@m4n0 I have another question could you please make a glance at that question here is the link https://stackoverflow.com/questions/68066592/objects-going-out-of-container-while-rotation-in-javascript – Shayan Kanwal Jun 21 '21 at 10:55
@m4n0 There is another awesome question could you help me with that https://stackoverflow.com/questions/68207471/how-to-created-paper-folding-effect-in-css-and-javascript – Shayan Kanwal Jul 01 '21 at 09:19

clip-path bounces at the top due to offset in Javascript?

1 Answers1