Jump to content
Search Community

How to continue animation that is bind to mousemove for mousewheel

AsKadir test
Moderator Tag

Recommended Posts

Hey, guys!

I'm still trying to make a cool effect for cursor like here https://www.castoretpollux.com/,

if you scroll down a little bit you will see a big text and animation like in my codepen.

They are using gsap for sure.

My issue is - if not moving mouse pointer and just use mouse wheel, continue animation.

You can see that in link animation is still working.

 

Mousewheel is working on mouseenter, mouseleave, mousemove.

 

I think it's not related to gsap question, but a lot of people here are using cursor animation.

It will be very usefull for all)

I tried a lot of things, but my knowledge is poor for such things.

Can you give me the cue, please?

See the Pen PoPKJbV by ChicagoJostik (@ChicagoJostik) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey Aslan. Your question is not clear to me. Are you asking how to make the same effect work if the user positions the cursor above the text and then scrolls (so that the cursor is at a different place but still hovered over the text)? If so, you'd probably have to save the last cursor position and inside of the scroll callback update the position of the circle based on the difference between the last update and the current position. An alternative approach would be to drop the mousemove/leave callbacks entirely and just do an update inside of GSAP's ticker. That way it would work when people scroll automatically (but overall the performance would be slightly more intense because the checks are done every tick).

  • Like 1
Link to comment
Share on other sites

@ZachSaucier Hi, Zach!

 

1 hour ago, ZachSaucier said:

Are you asking how to make the same effect work if the user positions the cursor above the text and then scrolls (so that the cursor is at a different place but still hovered over the text)?

Yes, exactly.

 

I tried first one, but not sure right or not, and get some jumps, it updates but not smoothly.

Second alternative can't understand what you mean, how can I drop mousemove event with gsap.ticker?

 

Link to comment
Share on other sites

8 minutes ago, AslanGoi said:

I tried first one, but not sure right or not, and get some jumps, it updates but not smoothly.

It might help to throttle the scroll event so it only fires if an RAF has happened since the last time.

 

9 minutes ago, AslanGoi said:

Second alternative can't understand what you mean, how can I drop mousemove event with gsap.ticker?

Use a ticker function, inside it detect where the mouse position is on the page. If it's within the bounds that you want, update the circle position.

  • Like 1
Link to comment
Share on other sites

@ZachSaucier

Zach, I tried to make with ticker, but I can't understand how to use ticker() without events,

So I tried with events, my logic is not right, but I think it's near)

 

I recreated codepen with single cursor.

So cursor not working properly for the first time, but if scroll by mouse wheel one time it starts to work correctly only for one position change,

And then mousewheel not changing position, works only mousemove.

See the Pen dyYVeaN by ChicagoJostik (@ChicagoJostik) on CodePen

 

Can you give another advice, please? 🙏🙏🙏

Link to comment
Share on other sites

8 minutes ago, Shrug ¯\_(ツ)_/¯ said:

Do you mean position fixed? If so I know that, but if you look at my first codepen,

there is a div and a cursor inside it, there is no option to use position: fixed;

  • Like 1
Link to comment
Share on other sites

@ZachSaucier Thanks a lot, Zach!!!

There are some jumps on scroll, but it smoother than if I updated position on scroll callback,

How do you think they have smooth animation because of a smooth scroll?

 

Anyway, now I have a great example!

I will try to reedit your codepen and post it here.

 

 

Link to comment
Share on other sites

3 minutes ago, AslanGoi said:

There are some jumps on scroll

I'm not noticing any here.

 

3 minutes ago, AslanGoi said:

How do you think they have smooth animation because of a smooth scroll?

Not sure what you're asking. They seem to be doing approximately the same approach. I'm on a Mac so maybe that's why I'm not noticing any smooth scroll that you're referencing (Macs have it built in).

 

They don't limit the animation to only the times when it's relevant so that's actually worse for performance.

  • Like 1
Link to comment
Share on other sites

@ZachSaucier 

When I use touch pad the animation is smooth,

But if I'm using mouse there is jumping,

it's weird, I will try on Monday on another pc.

Yes, I saw their animation is always working, that was my second future question how to limit animation, but your example has already shown) 

Thanks!

Link to comment
Share on other sites

11 minutes ago, AslanGoi said:

But if I'm using mouse there is jumping

Are you on Windows and do you mean with a mousewheel? If so that makes sense because it's immediately setting the value. You could switch out the quickSetters for .to() tweens and it'd be smoother I'd bet. Make sure to set overwrite to 'auto' if you're going to do that.

 

11 minutes ago, AslanGoi said:

that was my second future question how to limit animation, but your example has already shown

Glad I could answer it before it was even asked :) 

  • Like 1
Link to comment
Share on other sites

9 hours ago, ZachSaucier said:

Are you on Windows and do you mean with a mousewheel?

@ZachSaucier No, I was on macbook pro and used mousewheel.

9 hours ago, ZachSaucier said:

You could switch out the quickSetters for .to() tweens and it'd be smoother I'd bet.

Yes, it become smoother. Thanks, Zach!

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