Jump to content
Search Community

Help with custom cursor

jillianadriana test
Moderator Tag

Recommended Posts

I am trying to create a custom cursor for a blog post page where the cursor goes from default to a custom "read" label when hovered over the blog posts (ie - the featured image or blog post title).

 

I have been unable to get it to work on multiple posts, and when it does show up, the positioning goes off if you scroll down/move the mouse down the page and then move the mouse back up.

 

I realize this might be a JS issue but I am unsure, so I wanted to throw it out here to see if I can get some help if it is indeed a GSAP issue.

 

 

See the Pen MWpmRVq by jillianadriana (@jillianadriana) on CodePen

Link to comment
Share on other sites

Hey @jillianadriana - welcome to the forums.

 

8 hours ago, jillianadriana said:

I realize this might be a JS issue but I am unsure, so I wanted to throw it out here to see if I can get some help if it is indeed a GSAP issue.

 

Yes, that really looks more like a general JS issue.

If you want it to work for multiple elements, you'd first get all those elements with .querySelectorAll instead of .querySelector...

 

var followArea = document.querySelectorAll('.post-clickable');

 

...and then forEach add those eventListeners.

 

See the Pen aca4dcb1e9d48cfd06eb7ac0fd9ab550 by akapowl (@akapowl) on CodePen

 

 

Edit:

Also you might want to consider adjusting your CSS a bit, because as of now, the cursor will also get animated in when hovering over 'white space' way outside of your content because your .post-clickable container doesn't look to be sized properly. But maybe that's also intended, I don't know.

 

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

Additionally there's no need to add css objects -
 

gsap.to(buttonText, 0.25, {
 css: {
  opacity: 1
 }
});

// can be

gsap.to(buttonText, 0.25, {
 opacity: 1
});


and

 

gsap.to(button, 0.5, {
 css: { transform: `translate(-50%, -50%) scale(0.75)` }
});

// can be

gsap.to(button, 0.5, {
 yPercent: -50,
 xPercent: -50,
 scale: 0.75,
});



 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

2 hours ago, akapowl said:

Edit:

Also you might want to consider adjusting your CSS a bit, because as of now, the cursor will also get animated in when hovering over 'white space' way outside of your content because your .post-clickable container doesn't look to be sized properly. But maybe that's also intended, I don't know.

 

You are right, I don't want it over the white space. Thanks for that heads up!

  • Like 1
Link to comment
Share on other sites

I think that is because you are using pageX and pageY for setting the position of the custom cursor.

 

Those values take the scrollposition of the page into account.

 

So what you'd rather want to use is clientX and clientY.

 

I also just noticed that I put the 

 

page.addEventListener('mousemove', moveCircle);

 

into the forEach loop in my example above, as it was inside your mousemover-event function - of course you don't want to do that.

I took it out here.

 

See the Pen 9957de7f4c8c273f30d67cb09db000e5 by akapowl (@akapowl) on CodePen

 

  • Like 4
Link to comment
Share on other sites

  • 1 month later...
8 minutes ago, jillianadriana said:

Follow up -- how to disable this custom cursor on mobile? Is that possible?

 

Have it hidden and don't enable until the first mouse move. Please don't try to detect touch as that will fail on computers with touchscreens.

 

Psuedo code

window.addEventListener("mousemove", initCursor);

function initCursor() {
  window.remmoveEventListener("mousemove", initCursor);
  
  // show and enable cursor animations
}

 

 

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