Jump to content
Search Community

Mouse follow effect

eliphino test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

@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!

Link to comment
Share on other sites

  • 3 weeks later...

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...