Hello! I have been trying to follow the GSAP/React tutorial here and I have checked the other forum posts but I'm just not having any luck. I'd like to have a small div follow/replace the cursor on my screen. On mousemove of the parent component - the e.clientX and e.clientY values are passed down as props to the child component New Cursor. I set up the constructor and lifecycle functions like in the tutorial, but my replacement cursor isn't animating.
If I pass a regular number as a prop it works, but it seems that something about e.ClientX and e.ClientY are preventing things from animating. I'm extremely new to React so I really appreciate any patience/help. Thank you!
Also here is the parent component if that helps:
import React from 'react';
import Header from '../components/Header';
import NewCursor from '../components/NewCursor';
import { css } from '@emotion/core';
class NewCursorLayout extends React.Component{
constructor(props) {
super(props);
this.state = {
x: '',
y: '',
};
}
_onMouseMove = (e) =>{
this.setState({ x: e.clientX, y: e.clientY });
}
componentWillUnmount(){
const lastX = this.state.x;
const lastY = this.state.y
localStorage.setItem("x", lastX);
localStorage.setItem("y", lastY);
}
render(){
const { x, y } = this.state;
const { children } = this.props;
return(
<>
<div onMouseMove={this._onMouseMove.bind(this)}
css={css`
border: 1px solid red;
height: 100vh;
width: 100vw;
max-width: 100%;
`}>
<NewCursor top={y} left={x}/>
<Header />
<main css={css`
width: 100%;
max-width: 800px;
margin: 0 auto;
border: 2px solid pink;
`}>
<h3>New Cursor Layout</h3>
{children}
</main>
</div>
</>
)
}
};
export default NewCursorLayout;