跟随已经动画元素的动画光标

Question

I have an element which has an animation for scaling up and down (like breathing effect) and I want to add cursor following.

My code works only If I delete the animation in CSS.

What I'm doing wrong?

looks like your post is mostly code; please add some more details.

 class FollowCursor { constructor(element, window) { this.element = element; this.w = window; this.w.onmousemove = this.move.bind(this); } move(e) { this.element.setAttribute( "style", `transform: translate(${e.clientX}px, ${e.clientY}px);` ); } } const el = document.querySelector(".el") const cursorFollowing = new FollowCursor(el, window)

 .el { position: absolute; animation: a-breathing 8s infinite forwards; left: 0; top: 0; width: 30px; height: 30px; background-color: yellow; } div { position: relative } @keyframes a-breathing { 0% { transform: scale(1); } 60% { transform: scale(1.8); } 100% { transform: scale(1); } } ```

 <div> <div class="el"> </div> </div>

jsfiddle snippet

Answer 1

I believe you'll get your expected behavior if you change this line

transform: translate(${e.clientX}px, ${e.clientY}px);

for this:

position: absolute; top: ${e.clientY}px; left: ${e.clientX}px

Eg: https://jsfiddle.net/cxszqdka/

Answer 2

You're overwriting your transform attribute since you can only have one per element, so you need an element to move around and another div element to do the breathing; here is the solution:

 class FollowCursor { constructor(element, window) { this.element = element; this.w = window; this.w.onmousemove = this.move.bind(this); } move(e) { this.element.setAttribute( "style", `transform: translate(${e.clientX}px, ${e.clientY}px);` ); } } const el = document.querySelector(".el") const cursorFollowing = new FollowCursor(el, window)

 .el { position: absolute; left: 0; top: 0; width: 30px; height: 30px; background-color: yellow; } .breathing-element { animation: a-breathing 8s infinite forwards; width: 100%; height: 100%; background: red; } div { position: relative } @keyframes a-breathing { 0% { transform: scale(1); } 60% { transform: scale(1.8); } 100% { transform: scale(1); } }

 <div> <div class="el"> <div class="breathing-element"></div> </div> </div>

You can also combine multiple values for the transform attribute following this pattern:

transform: translate | transform | scale | rotate