How to continue animation that is bind to mousemove for mousewheel

[AsKadir 37 Likes (Newbie)]

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

[ZachSaucier 7,152 Likes (Superhero)]

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

[AsKadir 37 Likes (Newbie)]

@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?

 

[ZachSaucier 7,152 Likes (Superhero)]

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.

[AsKadir 37 Likes (Newbie)]

@ZachSaucier Thanks, Zach! I will try to use ticker.

[AsKadir 37 Likes (Newbie)]

@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? 🙏🙏🙏

[Shrug ¯\_(ツ)_/¯ 947 Likes (Leader)]

Have a look at this thread I think it may help.

https://greensock.com/forums/topic/19947-custom-cursor-movement-disappears-on-scroll/?do=findComment&comment=104963

[AsKadir 37 Likes (Newbie)]

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

Have a look at this thread I think it may help.

https://greensock.com/forums/topic/19947-custom-cursor-movement-disappears-on-scroll/?do=findComment&comment=104963

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;

[Shrug ¯\_(ツ)_/¯ 947 Likes (Leader)]

Sorry I only looked at your last post and interpreted it relative to that thread. I’ll let Zach carry forth.

[AsKadir 37 Likes (Newbie)]

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

Sorry I only looked at your last post and interpreted it relative to that thread. I’ll let Zach carry forth.

Thanks anyway for your attention!

[ZachSaucier 7,152 Likes (Superhero)]

This is more so what I was talking about:

See the Pen PoPJBbY?editors=0010 by GreenSock (@GreenSock) on CodePen

[AsKadir 37 Likes (Newbie)]

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

 

 

[ZachSaucier 7,152 Likes (Superhero)]

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.

[AsKadir 37 Likes (Newbie)]

@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!

[ZachSaucier 7,152 Likes (Superhero)]

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  

[AsKadir 37 Likes (Newbie)]

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!