Jump to content
GreenSock

wneet

Follow by mouse

By wneet, in GSAP. Views: 28,831

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

Posted

Hello there,

I have a problem when scrolling the page my follow mouse circle doesn't follow the mouse courser, 

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

 

See the Pen vbJpyr by nadoaa (@nadoaa) on CodePen

 

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

But I have page with scroll.

If I set position to fixed the page won't scroll down.

My problem is when I scrolling page down the mouse follow animate doesn't work.

Link to comment
Share on other sites
Posted

Hi @wneet,

 

Even during and after a scrolling phase, 'Oscar' follows the mouse - a small movement of the mouse is enough.

 

See the Pen omGdVq by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

  • Like 2
Link to comment
Share on other sites
Posted

i believe @OSUblake meant to set the circle's position to fixed, not the entire page. Seems to work fine

See the Pen wNPBPQ?editors=0110 by GreenSock (@GreenSock) on CodePen

You still have to move the mouse after scroll because your moveCircle function only gets called when the mouse moves.

 

  • Like 2
Link to comment
Share on other sites
Posted

To get the circle to stay with the cursor when scrolling, try using the 'mousewheel'  event in combo with a TweenLite.set() to keep the circle on (or close to) the cursor while scrolling.

 

See the Pen daZYjG by sgorneau (@sgorneau) on CodePen

 

  • Like 1
Link to comment
Share on other sites
  • Author
Posted

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?

Link to comment
Share on other sites
Posted
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
Posted

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
Posted

Hi @OSUblake,

 

You are so right: Stop copying other people's code you don't understand!
I still have this stupid habit.

 

See the Pen jdaJrw by mikeK (@mikeK) on CodePen

 

Thanks

Mikel

 

Link to comment
Share on other sites
Posted

You should make Oscar blink and move his mouth when he's following the mouse, as if he's trying to eat it, Mikel

  • Haha 1
Link to comment
Share on other sites
  • Author
Posted

@Dipscom

Thank  you so match for your kind response In fact I'm still learning this new technique..

I will do my best to learn it..

  • Like 1
Link to comment
Share on other sites
Posted

Hi @Dipscom,

 

That's the next step.
As you can see in my first pen, I have already tried ...

 

Kind regards

Mikel

 

Link to comment
Share on other sites
Posted

Yes, sorry if I seem grumpy. I just hate that code. I've seen it enough times that I can remember where it came from. 

Link to comment
Share on other sites
Posted

Let's kick this nest of wasps, then...

 

4 minutes ago, OSUblake said:

I just hate that code.

 

Why? What is so wrong that elicits such passion from you, Blake?

 

Oh why so much hate in your heart? Shouldn't we all be more loving?

  • Like 1
Link to comment
Share on other sites
Posted
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
Posted
12 minutes ago, Dipscom said:

Why? What is so wrong that elicits such passion from you, Blake?

 

It's like an itch that I can't scratch. That code keeps showing up, people keep having problems with it, and there's nothing I can do about it from happening again.

  • Haha 1
Link to comment
Share on other sites
Posted
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...
Posted

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
Posted
6 minutes ago, BMateus said:

Any guess why the strange behaviour?

You're adding a new tween to the timeline every event. That's no good.

 

In GSAP 3 we recommend using .quickSetter():

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

  • Like 4
Link to comment
Share on other sites
Posted

Oh, I see! Didn't knew about .quickSetter(). 🤦‍♂️

 

Makes total sense, of course. Thank you so much for the info.

 

I'll test it out right away.

 

 

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account