[Hover state of custom cursor has unpredictable behaviour (React / GSAP)]

Hello @Rodrigo, thanks for your answer but this still doesn't solve the problem. The cursor is buggy when hovered on the text.
Also, the codesandbox link isn't accessible so I'm not sure if I'm doing something wrong on my end.

Thanks.

[Hover state of custom cursor has unpredictable behaviour (React / GSAP)]

I've created a custom cursor whose X and Y gets updated on change of mouse. Using React and GSAP.
The cursor also changes in size when it is hovered on a specific text. However, the hover state is not consistent and glitches at the time of using it.

I'm sharing the codesandbox link where the same problem is replicated. Any and every help is appreciated, thank you.

 

Codesandbox Link: Link

[I am rewriting blocks of code in GSAP which seems like a bad practice.]

@Cassie is there any major difference between the GSAP.utils function you used to create ARRAY and the querySelectorAll that creates a NODELIST? 
Thanks again.

[I am rewriting blocks of code in GSAP which seems like a bad practice.]

Thank you so much @Cassie. Feeling a little bit more confident after reading your take on this. 

[I am rewriting blocks of code in GSAP which seems like a bad practice.]

I am a beginner using GSAP and JS, so would appreciate some guidance. I believe that rewriting blocks of code is generally regarded as a bad practice. Can you please go through the text animation and image animation that I've wrote and tell me how I can optimize this?

Also, if you have any solution to the scrolltrigger positioning rather than hardcoding a % in as the start and end, let me know.

I appreciate your help, thank you.

 

Here is the codesandbox url.
LINK: https://codesandbox.io/s/kind-tdd-7q8f5v?file=/index.html

 

[In the method gsap.to(t,e,r) what is r?]

I am a js newbie and I understand that t is the target and e is the event property of the method gsap.to. 

Not sure what the property r is here. 

Also, I was trying to see the actual code for gsap.to method but couldn't find it. How do I get that? Just trying to understand how it works under the hood.

[Animation is starting before anim.play and the animations are not smooth at all.]

Thank you so much @mvaneijgen. Picked up a few things from your post. Today is my second day with GSAP, thoroughly enjoying the experience.

[Animation is starting before anim.play and the animations are not smooth at all.]

Thank you for helping, in advance.

I've two questions.

 

1. The animation is starting even before I am using anim.play(). I suppose that this is because the anim.to is getting initiated before itself. But I can't solve this issue.

 

2. The animation is not smooth at all even after adding easing. When I am zooming in the browser, it is smoother but when at 100% zoom level, it is stuttering.

See the Pen RwJERjP by Aimack (@Aimack) on CodePen