Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Chris Prieto

Animated Mouse Cursor

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

So first off a warning, this code I found in some codepen and I cannot seem to find it again ?
 

The little cursor wasn't staying in place while scrolling so per this thread I made the cursor div and it's follower div position: fixed instead of absolute. And that worked but now the mouse and the cursor divs aren't synced up together and after a few scrolls down the cursor divs goes down way past the cursor as you can see in codepen. Ideally I would like for it to behave like this codepen (https://codepen.io/osublake/pen/daZwpO) it is much simpler but I can't figure out how to add a lil follower div to it that behaves the same way as my codepen.

 

 

 

See the Pen xxKRyKd by ionz149 (@ionz149) on CodePen

Link to comment
Share on other sites

awwwww maaaaan ... well that is stupid simple fix haha ?‍♂️

 

I even feel like I might've read somewhere that was the issue now that you mention it.

 

Thanks again @ZachSaucier !

Link to comment
Share on other sites

Happy to help! 

 

I can't tell you how many hours I've wasted trying to debug what ended up being wrong variable names that are similar in JavaScript (like tl vs t1)... Sometimes it's good to just have another set of eyes :) 

  • Like 3
Link to comment
Share on other sites

38 minutes ago, ZachSaucier said:

(like tl vs t1)

 

Ha! So true. I've made that mistake several times trying to help people here on the forum with their demos. That lowercase 'l' and '1' really start to look alike after you stare at them long enough. ?

  • Like 2
  • Haha 1
Link to comment
Share on other sites

3 hours ago, ZachSaucier said:

Just switch it to use e.clientX and e.clientY like in Blake's demo :) 

 

And switch it to use x and y like in my demo. I don't use left and top anywhere.

  • Like 2
Link to comment
Share on other sites

14 hours ago, OSUblake said:

 

And switch it to use x and y like in my demo. I don't use left and top anywhere.

@OSUblake I just tried to replace left and top with x and y and the cursors flew off in odd directions because the transitions. Once I do get that fixed it stops animating when you hover over links.

 

I was able to get a second ring that follows around using your example but cannot get the cursor to animate when hovering over link either.

See the Pen PoYWNpV by ionz149 (@ionz149) on CodePen

Link to comment
Share on other sites

16 minutes ago, Chris Prieto said:

I just tried to replace left and top with x and y and the cursors flew off in odd directions because the transitions.

 

Well that's the problem. Your CSS transform transitions are conflicting with GSAP JavaScript animations. Get rid of that addClass/removeClass stuff and replace it with GSAP animations, and you should be good. 

 

BTW. There is no need to wrap stuff in a css object. 

 

TweenLite.to($circle, 0.3, {
  x: e.clientX,
  y: e.clientY
});

 

  • Like 3
Link to comment
Share on other sites

On 8/22/2019 at 9:59 AM, OSUblake said:

 

Well that's the problem. Your CSS transform transitions are conflicting with GSAP JavaScript animations. Get rid of that addClass/removeClass stuff and replace it with GSAP animations, and you should be good. 

 

BTW. There is no need to wrap stuff in a css object. 

 


TweenLite.to($circle, 0.3, {
  x: e.clientX,
  y: e.clientY
});

 

 Okay, this is a bit over my head but I am hoping to get it eventually. I removed the css objects and the add/remove class stuff but am unsure how to replace with GSAP. I've been trying to wrap up a project so I haven't had much time to break stuff but will get back to it shortly :D

Link to comment
Share on other sites

  • 2 months later...

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}
/>
)
}
Link to comment
Share on other sites

  • 11 months later...

I'm trying to replicate this in React but the cursor goes mental and flies all over the place, the loop then causes my computer to start overheating

Link to comment
Share on other sites

@JoeH It sounds like you implemented it incorrectly :) Unfortunately we can't help you given the lack of information. If you'd like help debugging please make a minimal demo of the situation using something like CodeSandbox:

 

Link to comment
Share on other sites

Sorry yes, it was a flipant remark in my frustration. I managed to figure it out, I didn't need to put it inside the useEffect function because I was already using a Hook to detect mouse movement.

  • Like 1
Link to comment
Share on other sites

  • 4 months later...
On 8/21/2019 at 6:08 PM, ZachSaucier said:

Just switch it to use e.clientX and e.clientY like in Blake's demo :) 

 

 

 

 

Happy tweening

Is there a way I can get a parallax/magnetic mouse cursor to my squarespace website? 
Like this website- https://www.minimist.ca/
Specifically https://studiomaertens.com/about

Link to comment
Share on other sites

Hey @Collin C. and welcome to the GreenSock forums.

 

39 minutes ago, Collin C. said:

Is there a way I can get a parallax/magnetic mouse cursor to my squarespace website? 

We don't know much about using Squarespace but I found this article about adding custom JS to a Squarespace site in their docs. I would recommend asking the Squarespace support/forums about adding custom JS. 

Link to comment
Share on other sites

  • 4 months later...

I'm trying to replicate this in a way just without the follower circle. My mouse enter function only fires when mouse is moving and immediately unhover. I've tried all of the ways from adding classes to tweening and I continue to get the same results. Any help would be amazing. 

 

See the Pen MWmwNQY by hobsond (@hobsond) on CodePen

Link to comment
Share on other sites

I fixed it I had to add

    user-select: none;
       pointer-events: none

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×