Custom cursor with line trails

[raund]

Hello everyone! I've been a lurker over here for a long time and I think this time is my turn to ask for a little bit of help.

 

I got a project where I'm building a custom cursor very similar to the one showing on the attached pen by Blake Bowen  I'm trying to implement this on a project using React but I'm having a bit of trouble understanding how the modifier plugin is working, so far I was able to get the custom cursor going however no curves are getting formed. I did build a demo for you guys and gals to take a look over here https://codesandbox.io/s/epic-hofstadter-1405v?file=/src/App.js 

 

Apologies if maybe this is the type of question that should be avoided.

 

Thanks

See the Pen mEpado by osublake (@osublake) on CodePen

[OSUblake]

Hi raund,

 

I didn't do a deep dive into your code, but I noticed that you are passing the same leader to every line. The way I set that demo up made more sense in GSAP prior to version 3 as the leader object is the old _gsTransform object except for the first one, which is the just a simple object with x and y properties.

 

Notice in the loop how the leader changes. The createLine function is returning the _gsTransform object for that line, so the next createLine call will pass in the previous line's _gsTransform object.

for (var i = 0; i < total; i++) {
  leader = createLine(leader, i);
}

 

In v3, _gsTransform has been replaced with gsap.getProperty, so we need to make a few adjustments. Now the leader is what gsap.getProperty(line) returns. That will work fine with all the lines except for the first one, so I made the initial leader object a function so that it will use a similar syntax to getProperty.

 

let leader = (prop) => {
  return prop === "x" ? pointer.x : pointer.y;
}

 

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

 

Now about implementing that in React - I probably wouldn't make the lines their own component. I would try to make the entire animation a single component. I would also avoid using setState for the position as it's unnecessary for the animation, and just slows React down.

 

[raund]

Hi! Thank you very much for your answer, it's working now thanks to your help  

[cerdupel]

First of all, sorry for bringing this post back to activity!

 

@OSUblake that pen has been super helpful with understanding modifiers, and also how to replace _gsTransform with getProperty, which was a bit confusing at first. After playing around with it for a while trying to achieve different results though, I'm completely lost.

 

One of the things I've been trying to do is to get the end of the trail to not deviate away that much from its original path. If you trace a square-shaped path with the mouse, the trail rounds up fast and the shape is lost super quick, and I'd like it to keep its shape for a bit longer. What's confusing here is that I don't see much of a difference (almost none) in the results when trying different values, even when using completely random ones like here.

 

gsap.set(line, { x: -1500, y: -750 });
  
let pos = gsap.getProperty(line);

gsap.to(line, {
  duration: 10000,
  x: "+=150",
  y: "+=10",
  repeat: -1,
  ease: "expo.inOut",
  ..
});
	

 

I thought I understood, but the more time I spend on it, the more lost I feel! Also, and since this is my first post ever, thank you for the consistently amazing help you guys provide on the forum, it's just incredibe how responsive and helpful this community always is. 👏

 

See the Pen ExEKvmb by cerdupel (@cerdupel) on CodePen

 

 

[Cassie]

Hey there Cerdupel!

Thanks for the kind words. I'm afraid Blake's not around to answer this question at the moment. Just wanted to give you a little heads up.

 

The reason you can add whatever value you want in that tween is because the modifiers are intercepting that value. So the bit you'll need to tweak is in the modifiers section. not the x and y.

I can't help you much more than that without really digging into Blake's pen for a few hours - and even then I'm not too certain I can be of use. Blake's brain is much more math oriented than mine.

[cerdupel]

Hey Cassie!

I totally understand. I had the same thought, and also the same problem... I'm ok with (very) basic math, but feel I would need a lifetime of trial and error to find the answer I'm looking for. It's not that important though, I just got a bit obsessed with it because I wasn't getting it. I'll dig deeper into it as soon as I have some free time to spend, whenever that may be!

Thank you for your answer  

[Cassie]

This would probably be where I'd start to understand this - The coding train is always great for getting to grips with creative coding/generative concepts

Hope this helps! Thanks for being a Club GreenSock member too btw 🥳💚
 

 

[cerdupel]

Will watch it, thank you for the tip.

 

And of course! GSAP has been an essential tool for me for years, so thank you for that too!