Rotate on Mouse

[rehan509]

On 12/23/2020 at 8:46 PM, ZachSaucier said:

That "stretchiness" is a bit of a different effect usually created by having a bunch of different objects that each follow the mouse at different speeds and sizes. Blake has created some similar examples:

 

 

 

 

 

 

 

Or this by Cassie:

 

 

 

In looking for those demos I also found this one by Blake that's more similar to the effect that the OP asked about:

 

Can i Get TypeScript version of this Code with React : 

 

[Rodrigo]

Hi @rehan509 and welcome to the GreenSock forums!

 

Please be more specific about what you're looking for. I don't know exactly which example you want to see ported in React.

 

Also I strongly recommend you to try to get started on your own setting up a React TS app. You can use Vite to easily scaffold it:

# npm 6.x
npm create vite@latest my-react-app --template react-ts

# npm 7+, extra double-dash is needed:
npm create vite@latest my-react-app -- --template react-ts

Also you can follow this link to create one in Stackblitz:
https://vite.new/react-ts

 

Once we can see what you're trying to do, we'll be able to guide you and help you with GSAP related questions.

 

Let us know if you have more questions.

Happy Tweening!

[ouis]

On 5/15/2017 at 3:40 PM, OSUblake said:

GSAP is not going to help you out much here. You have to find the angle from the absolute transform origin to the mouse for every thing you want to rotate.

 

var dx = mouse.x - origin.x;
var dy = mouse.y - origin.y;
    
var transform = "rotate(" + Math.atan2(dy, dx) + "rad)";
element.style.transform = transform;

 

So something like this, although I'd probably use canvas for this many elements.

 

 

 

This very helpful thx,
but when I use this functionality in two different component in the same page the second component won't rotate the lines (I'm using Next.ts)

the first one work perfectly tho, can anyone help me plz?

  

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[ouis]

2 hours ago, GSAP Helper said:

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Thx for clarifying,

Here is a code example :

https://stackblitz.com/edit/nextjs-6qwxma?file=pages%2Findex.js

The problem appear even if I remove the first component, (only one lines component), I think because I'm putting the component at the end of the page

[Rodrigo]

Hi @ouis,

 

There is not even a single line of GSAP code in your demo...

 

Also there is some logic issues. When using mouse position on mouse move events you always have to consider the position of the element relative to the top of the viewport and you should probably listen to the event inside the container that has the lines in it and not the global window object:
 

observer.current = new IntersectionObserver(
  (entries) => {
    const entry = entries[0];
    if (entry.isIntersecting) {
      window.addEventListener('mousemove', onMouseMove);
    } else {
      window.removeEventListener('mousemove', onMouseMove);
    }
  },
  { threshold: 0 } // Trigger the callback as soon as 1 pixel is visible
);

Also we have the Observer Plugin just for this type of situations:

https://gsap.com/docs/v3/Plugins/Observer/

 

Also it could be a good idea to use event.clientX instead of event.pageX:

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX

 

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX

 

Hopefully this helps.

Happy Tweening!