Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jillianadriana

Help with custom cursor

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 post
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 post
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 post
Share on other sites

Thank you both so much for your help. Still learning all this stuff, so I appreciate the guidance!

  • Like 1
Link to post
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 post
Share on other sites

Happy to help :) 

  • Like 1
Link to post
Share on other sites

Actually, can anyone help me figure out why the cursor isn't sticking to its position when I scroll down the page/move it down?

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

×