Jump to content
Search Community

Image's stick smoothly to cursor

Crftd test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi everyone,

 

I found the codepen (the bottom one) this is an effect I'd like to use in a project of mine, multiple items with different image's while hovering. The only thing that I'd like to add is the effect in this codepen: 

See the Pen ExeyQgP by nazarenooviedo (@nazarenooviedo) on CodePen

 . Where the image smoothly follows the cursor instead of being 'hard' attached to it. I'm trying to combine the two effects, but can't get it to work properly. Does anyone know another codepen which combines the two? Or sees what it takes to make it work? Thanks for your time in advance!

See the Pen 21b35858191b221e86c4a3fd79e80350 by akapowl (@akapowl) on CodePen

Link to comment
Share on other sites

Thanks Cassie! I've changed the version and the code seems to be working fine now.

Only thing I didn't account for is that I'm using a smooth scrolling library which screws up the position of the image right now.

I've managed to get all my other gsap animations to work using by adding the 'scroller' attribute, how would I approach this with the animation of this topic?

 

For context, I'm using Locomotive scroll (I'd be using ScrollSmoother if it wasn't for the subscription, maybe once I'm more experienced). Do you maybe have an example I can follow for a case like this?

 

Thanks in advance! I really appreciate you time.

Link to comment
Share on other sites

Hi,

 

That's most likely tied to the fact that the mouse move event handler uses clientX and clientY properties which are tied to the viewport and in this case the image's position is altered by Locomotive as you mention.

 

I don't recall any example of a mouse follow effect with GSAP and Locomotive, but I could be wrong. What I would do is compare the coordinates of the image returned by getBoundingClientRect with the ones of the clientX and clientY ones and find a dynamic way to match them.

 

Unfortunately we don't have the time resources to tackle more complex logic issues in these free forums. You can contact us for paid consulting or post in the Jobs & Freelance forums.

 

Happy Tweening!

Link to comment
Share on other sites

1 hour ago, Olav said:

Hi @Rodrigo, would this be easier with the native scrollsmoother from gsap? Or would we face the same issue

Honestly I couldn't tell you since I've never created anything of the sort. But you could try a simplified version of your setup in this codepen that has all the bonus plugins:

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

You can always use that for trying the bonus tools on codepen and also you can install gsap-trial on your projects running on localhost as well:

https://www.npmjs.com/package/gsap-trial

 

Happy Tweening!

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