Jump to content
Search Community

Animated Mouse Cursor

Chris Prieto test
Moderator Tag

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

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

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...
  • 4 months later...

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...

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.
×
×
  • Create New...