Basit103
Basit103's Achievements
Recent Badges
0
Reputation
-
Hey everybody, can somebody help me? i want to add this cursor follow animation in react/gatsby. My code below. but im getting a error of cannot tween target of null. /* eslint-disable no-return-assign */ /* eslint-disable react/jsx-no-bind */ /* eslint-disable func-names */ /* eslint-disable prefer-destructuring */ /* eslint-disable no-param-reassign */ /* eslint-disable prefer-rest-params */ import PropTypes from "prop-types" import React, { PureComponent } from "react" import TweenMax from "gsap" import Helmet from "react-helmet" import styled from "styled-components" import { StaticQuery, graphql } from "gatsby" import { colors } from "../../style-utils" import Footer from "./Footer" import Header from "./Header" import "./reset.scss" const Wrapper = styled.div` margin: 0 auto; padding: 0; position: relative; background-color: ${colors.customWhite}; overflow-x: hidden; ` export default class Layout extends PureComponent { // eslint-disable-next-line react/static-property-placement static propTypes = { children: PropTypes.node.isRequired, } constructor(props) { super(props) // reference to the DOM node this.cursor = null // reference to the animation this.follower = null } // eslint-disable-next-line react/state-in-constructor state = { mouseX: 0, mouseY: 0, xTrailing: 0, yTrailing: 0, } componentDidUpdate = (prevProps, prevState) => { this.getElements() } getElements = () => { const { mouseX, mouseY } = this.state let posX = 0 let posY = 0 TweenMax.to({}, 0.016, { repeat: -1, onRepeat() { posX += (mouseX - posX) / 9 posY += (mouseY - posY) / 9 TweenMax.set(this.follower, { css: { left: posX - 12, top: posY - 12, }, }) TweenMax.set(this.cursor, { css: { left: mouseX, top: mouseY, }, }) }, }) } handleMouseMove = e => { const { clientX, clientY } = e this.setState({ mouseX: clientX, mouseY: clientY, }) // we set the main circle coordinates as soon as the mouse is moved } printLayout = data => { const { children } = this.props const { xMain, yMain, xTrailing, yTrailing } = this.state return ( <div> <Helmet title={data.site.siteMetadata.title}> <html lang="nl" /> <meta name="viewport" content="width=device-width" /> </Helmet> <Wrapper className="container" onMouseMove={e => this.handleMouseMove(e)} > <div className="cursor" ref={div => (this.cursor = div)} /> <div className="cursor-follower" ref={div => (this.follower = div)} /> <Header links={data.site.siteMetadata.links} /> {children} <Footer links={data.site.siteMetadata.links} /> </Wrapper> </div> ) } render = () => ( <StaticQuery query={graphql` query SiteTitleQuery { site { siteMetadata { title description } } } `} render={this.printLayout} /> ) }