Unusual behavior in the mouse movement

[DemonDisguise]

https://stackblitzstarters3zkguu-esi1--3000--10996a95.local-corp.webcontainer.io

well I am shifting to typescript and it has been hell using gsap there even for simplest things. Please see the code and fix the issue. If you can also provide some useful docs or place for me to use gsap comfortably with typescript.

[Rodrigo]

Hi,

 

We can't reach the URL you posted:

Please share the URL for the editor, not the project preview.

 

Finally GSAP has type definitions:

https://github.com/greensock/GSAP/tree/master/types

 

We haven't received any complain from developers about GSAP being hard to use with typescript, my guess is that you could be missing the definitions.

[DemonDisguise]

sry i don't know why it didn't work. And you are right i am bad at types and all. Here is another link i have tested it should work please try it and help me

https://stackblitz.com/edit/stackblitz-starters-yqngjumt?file=app%2Fpage.tsx

[Rodrigo]

Hi,

8 hours ago, DemonDisguise said:

And you are right i am bad at types and all.

Yeah, typescript is really not my jam at all and I don't use it unless I have to 🫠, so I completely understand.

 

Is worth noticing that there is a concept error in your code here:

const { context, contextSafe } = useGSAP(
  () => {
    (xTo.current = gsap.quickTo(boxRef.current, 'x', {
      duration: 0.8,
      ease: 'power3',
    })),
      (yTo.current = gsap.quickTo(boxRef.current, 'y', {
      duration: 0.8,
      ease: 'power3',
    }));
  },
  { scope: app }
);

Basically you have a couple of definitions for some refs, but there is no need to add the parenthesis around, also no reason for that comma between them. Those are not properties or keys inside an object, there are assignments inside the scope of a function, nothing more. This is more clear:

const { context, contextSafe } = useGSAP(
  () => {
    xTo.current = gsap.quickTo(boxRef.current, 'x', {
      duration: 0.8,
      ease: 'power3',
    });
    yTo.current = gsap.quickTo(boxRef.current, 'y', {
      duration: 0.8,
      ease: 'power3',
    });
  },
  { scope: app }
);

Also in your definitions you can use this:

const xTo = useRef<gsap.QuickToFunc|any>(null);
const yTo = useRef<gsap.QuickToFunc|any>(null);

Perhaps you're trying to achieve this:

https://stackblitz.com/edit/stackblitz-starters-1l1mlbqx?file=app%2Fglobals.css,app%2Fpage.tsx

 

Hopefully this helps

Happy Tweening!

[DemonDisguise]

well it works thanks a lot for helping me with the dumbest questions i have. Just one more doubt ( well I dont know if it is related to gsap or not) but the code works differently in my vs code dev compared to stackblitz why is that like I had to add all of this code        

	    const bounds = app.current.getBoundingClientRect();

        const flairBounds = flairRef.current.getBoundingClientRect();



        const x = e.clientX - bounds.left - flairBounds.width / 2;

        const y = e.clientY - bounds.top - flairBounds.height / 2;



        xTo.current(x);

        yTo.current(y);

 in place of your code to make it work like how it was working in stackblitz. So, I think what will the user see when i launch the website and like what is a good practise here? (Well I am bad at asking question as well, hope you understand what I am trying to ask). 

[Rodrigo]

Honestly I couldn't really tell you, I've tested on my local machine the code of this demo:

See the Pen Rwvdowy by GreenSock (@GreenSock) on CodePen.

 

In development and production mode without any need to add that particular code you're mentioning. Maybe this has to do with some peculiarity on your HTML layout, but I'm just guessing here 🤷‍♂️