Jump to content
GreenSock

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

Animated Mouse Cursor

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

Share this post


Link to post
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 !

Share this post


Link to post
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 2

Share this post


Link to post
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 1

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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}
/>
)
}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×