GSAP Cursor Questions

[Dhanwanth]

Hey!

I have a couple questions regarding this codepen, which has a custom cursor and textbox.

 

1. If you put the cursor on the left side of the viewport and drag it without stopping over the text box, the cursor half transforms, try stopping moving the cursor within the text box, the rest of the animation completes, how would I fix this?
2. Press enter in the textbox a couple of times, then scroll with the scrollbar, is there anyway to make the cursor move along with the scrollbar? Also when selecting text in the text box and dragging it?
3. When initially running and putting the cursor in the viewport for the first time, the outer ring moves from the center to the cursor location, I tried messing around with the x and y positions, but I still couldn't get it to work so that the outer ring is at the cursor position without needing to move from the center. (you may need to rerun the codepen to see it again)

 

Thanks for any help,

Dhanwanth!

See the Pen xxNBJGQ by Dhanwanth-Parameswar (@Dhanwanth-Parameswar) on CodePen

[Cassie]

Hiya! 

So honestly question 1 & 2 soundslike a bit of a cross device/input accessibility nightmare. I would personally just disable the custom cursor in text fields and allow the users operating system to handle it.

 

Maybe someone else will jump in and help, but these questions are definitely more on the logic side of things and less of a GSAP related question, so it's a little out of scope of these forums.

 

I will happily jump in and help with #3 though as it's more animation related!

 

This is to do with the initial cursor position that you have set here -

 let position = { 
    x: window.innerWidth / 2, 
    y: window.innerHeight / 2 
  };

 

I could jump in and edit your code, but honestly we can simplify this A TON by just using quickTo instead of quickSetter. QuickTo animates to a position, quickSetter doesn't, so allll of the code in your demo that's tracking delta and speed and stuff can go.

 

Here's a simple example. Try this on for size, I think it's more readable and you can probably either start here and layer in what you need or refactor your old demo a little.

 

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