Jump to content
Search Community

Follow by mouse

wneet 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

7 hours ago, wneet said:

If there is a way how can I make the follow mouse circle follow the mouse courser when scrolling too?

 

Don't let it scroll. Set its position to fixed.

 

And it would be better to animate x and y Instead left and top.

 

You should also be careful with your CSS transitions. Using all can cause a lot of problems.

 

 

 

  • Like 5
Link to comment
Share on other sites

On 2/7/2019 at 3:22 AM, wneet said:

How can I set position of circle based on window rather than page like cursor?

 

Again, set its position to fixed. 

 

https://codepen.io/osublake/pen/c0167e469feb95cd8ced1835d4e92919

 

 

And stop copying other people's code you don't understand. I've seen that code before, and it's not a good example to follow.

 

See the Pen kepDb by grayghostvisuals (@grayghostvisuals) on CodePen

 

 

 

 

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

Hey, @wneet, you're doing good.

 

Just in case you had the same gut reaction as I did with Blake's last reponse, he does sound a bit grumpy but he's not. He's super nice and a good teacher, just sometimes his words are a bit too dry.

 

We've all been there (I think) and tried to work with code we don't understand, I certainly do it all the time. Just keep looking at all examples you can find see why they are different and not how old they are. As time passes, the techniques get refined and new ways of doing things are thought of.

 

Happy Tweening!

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

4 hours ago, wneet said:

thanks @Shaun Gorneau

But 'mousewheel' didn't solve the problem.

How can I set position of circle based on window rather than page like cursor?

 

I guess I'm not following what it is you're after. Can you tell me if these two statements are true, and if any logic is missing?

 

1. The circle should follow the mouse cursor around the page.

2. When scrolling up or down the page, the circle should stay with the cursor in as close to real time as possible.

 

If so ... my CodePen does exactly that. And if you are not seeing that ... can you tell me which browser and OS you're using?

  • Like 1
Link to comment
Share on other sites

6 minutes ago, OSUblake said:

and there's nothing I can do about it from happening again.

 

You can't stop it from happening, true.

 

You can, however, write a blog post explaining why that's not optimal, refer people to it, became a web-celebrity and rake millions from it in a pyramid scheme.

  • Like 1
  • Haha 1
Link to comment
Share on other sites

  • 1 year later...

Hello again.

 

I've tried to use the code by @OSUblake (I'm not just copying, it's really straightforward and perfectly understandable) in Nuxtjs, but the behaviour is really strange, as the circle moves extremely slowly and jerky.

 

I'm using GSAP v3, but the code should work. I can't do a codepen for nuxt, but here's a minimal codesandbox.

 

https://codesandbox.io/s/mouse-follow-pointer-in-nuxt-gsap-v3-khfgf?file=/layouts/default.vue

 

The code is inside layouts/default.vue.

 

Any guess why the strange behaviour?

 

 

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