javascript - Not getting smooth cursor animation in react

Question

I am using this react code for getting a custom cursor following the main cursor. animation is done using gsap and lerp function. But the animation is not seamless and the chrome performance monitor shows the CPU usage is passing 100%. pls help me figure out this problem. I have referred to this video link for getting the cursor animation: https://www.youtube.com/watch?v=MEO6yQLAgKw&list=PLtSHrBhMos7hXeImRWnnC38mdYp_4c333&index=2&t=630s

import gsap from 'gsap';
import React, {Component} from 'react';
import './cursor.scss';

class Cursor extends Component{
  constructor(props){
    super(props);
    this.state={
     x : 0,
     y : 0
    };
    this.cursor = React.createRef();
    this.cursorConfigs = {
      x: { previous: 0, current: 0, amt: 0.2 },
      y: { previous: 0, current: 0, amt: 0.2 },
    };

    this.lerp = (a, b, n) => (1 - n) * a + n * b;
    
    
  }
  
  componentDidMount(){
    
   window.addEventListener("mousemove", e=> {
      this.setState({
        x: e.pageX,
        y:e.pageY
      })
    });
    
    
    this.cursor.current.style.opacity = 0;
    
    this.onMouseMoveEv = () => {
    this.cursorConfigs.x.previous = this.cursorConfigs.x.current = this.state.x;
    this.cursorConfigs.y.previous = this.cursorConfigs.y.current = this.state.y;

    gsap.to(this.cursor.current,{
      duration: 1,
      ease: "Power4.easeOut",
      opacity: 1,
    });
    
    
    
    window.removeEventListener("mousemove", this.onMouseMoveEv);

    requestAnimationFrame(() =>this.render());
    };

    window.addEventListener("mousemove", this.onMouseMoveEv);

}
 
  render(){

    
    

    
    this.cursorConfigs.x.current = this.state.x;
    this.cursorConfigs.y.current = this.state.y;
   

    for (const Key in this.cursorConfigs){
      this.cursorConfigs[Key].previous = this.lerp(
      this.cursorConfigs[Key].previous,
      this.cursorConfigs[Key].current,
      this.cursorConfigs[Key].amt
     );
    }
   
    console.log(this.cursorConfigs.x.previous, this.cursorConfigs.x.current)
    var styles = {
      transform:`translateX(${this.cursorConfigs.x.previous}px) translateY(${this.cursorConfigs.y.previous}px)`
    }
   
    requestAnimationFrame(() =>this.render());


    return(
      <div className="cursor" ref={this.cursor} style={styles}>
      <div className="cursor-media">
      
        
      </div>
    </div>
    )

   
  }
}


export default Cursor;```

question from:https://stackoverflow.com/questions/65919584/not-getting-smooth-cursor-animation-in-react

Answer 1

You actualy don't need to update on every mousemove. Consider debounce setState

example:

// delay in ms
function debounced(delay, fn) {
    let timerId;
    return function (...args) {
        if (timerId) {
            clearTimeout(timerId);
        }
        timerId = setTimeout(() => {
            fn(...args);
            timerId = null;
        }, delay);
    };
}

function handler(e) {
    this.setState({
        x: e.pageX,
        y: e.pageY,
    });
};

window.addEventListener("mousemove", debounced(200, handler));