I'm trying to create an element with a breathing animation effect that also follows the cursor. However, I'm running into an issue where the code only works if I remove the animation in CSS.
What am I doing wrong?
It seems like your post is mostly code, can you please provide 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>