Katie Nolan

Ah you were totally right! That is so obvious now that I think about it It's good to know that tweens just overwrite the old ones. I've got the animation working and can keep on tinkering. Thanks a bunch!

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;