Jump to content
GreenSock

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

Follow by mouse

Recommended Posts

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

 

Share this post


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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
1 hour ago, wneet said:

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

 

Again, set its position to fixed. 

 

See the Pen daZwpO by osublake (@osublake) on CodePen

 

 

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

Share this post


Link to post
Share on other sites

Thanks @OSUblake for your help..

I have been just learning how to use it ..

Share this post


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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

Hi @Dipscom,

 

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

 

Kind regards

Mikel

 

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×