Mouse follow effect

[eliphino 2 Likes (Newbie)]

Hi there, 

 

I am attempting to create this type of effect that a client has requested:

https://webflow.com/made-in-webflow/website/gavril-v4

 

My version in Codepen is a cut up of the official GSAP quickTo example but I changed to gsap.to so I could use the delay.

Mine is kind of like home made McDonalds at the moment, any tips on the best/cleanest/performant way to achieve an effect like this?

 

Kind regards,

Tom

See the Pen LYrQYOq by repetition (@repetition) on CodePen

[Rodrigo 5,068 Likes (Superhero)]

Hi @eliphino and welcome to the GreenSock forums!

 

First, thank you for being a Club GreenSock member and supporting GreenSock! 🥳

 

I think this approach works better, since you are also adding the event listener to the window object on every loop:

window.addEventListener("mousemove", e => {
  gsap.to(targets, {
    duration: 0.35,
    x: e.pageX,
    y: e.pageY,
    ease: "none",
    overwrite: "auto",
    stagger: 0.035,
  });
});

Also I'd recommend you to use less elements, since adding a bunch of them tends to look a bit off, but I'll leave that to your better judgement and the needs of your project.

 

Let us know if you have more questions.

 

Happy Tweening!

[eliphino 2 Likes (Newbie)]

@Rodrigo Thanks so much for your quick response, definitely cleaned up the attempt I'd made. I realised the original inspo was probably taken from a GSAP SVG line trail I found so in the forum so I changed some CSS and:

See the Pen eYKVJoO by repetition (@repetition) on CodePen

 

I will go through to GSAP to make sure I actually understand it properly and then convert for use in React.

 

Thanks!

[Rodrigo 5,068 Likes (Superhero)]

Hi,

 

You might want to have a look at this example:

https://greensock.com/react-advanced#imperative-communication

 

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

 

Avoid at all costs updating any component state on the mouse move event, since it'll trigger a bunch of re-renders that could cause performance issues on your app.

 

Happy Tweening!

[eliphino 2 Likes (Newbie)]

@Rodrigo

Thanks so much for this info, I really appreciate the extra thought! I love the GSAP community.