Cursor Follower help

[dpickering]

Trying to have tire tracks follow the cursor. I'm trying to copy this codepen 

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

 which has a bunch of circles following the cursor but struggling to get it to work with my own svg elements. Once I get it following the cursor I'll need to figure out a way for it to rotate based on the cursor movement as well but for now I need help understanding why the SVG isn't following the cursor. Open to other suggestions on how to go about this problem as well.

 

See the Pen GRapgbE by dpickering (@dpickering) on CodePen

[GreenSock]

Are you looking for something like this?: 

See the Pen PovPzpv?editors=0010 by GreenSock (@GreenSock) on CodePen

[dpickering]

Yes thank you, that will help me get started. I'm wondering if this is the right approach though because next I'll have to figure out how to rotate the SVG elements and currently it's always on the right side of the cursor. I feel like this will be tricky to cover all movements and have it fade in/out as the cursor moves/stops moving.  Would you recommend adding some kind of mask to reveal the trail? Is there a way to have the svg's rotate easily based on the movement of the cursor with some kind of svg invisible line/polyline?

[mvaneijgen]

Hi @dpickering welcome to the forum!

 

The beauty of GSAP is anything is possible, it just depends on how much elbow grease you want to put in to get it how you want. I have the feeling that it will be getting complicated fast and will require a lot of math. Sadly we just don't have the resources to provide free general consulting on these forums (of course anyone else is welcome to post an answer - we just want to manage expectations)

 

I don't have a silver bullet for you, my advise just keep on coding (and forking your work) and try out several ideas. Be sure to post back here if you have a specific question if something is not clear from the docs and maybe these resources will get you on the right track. Hope it helps and happy tweening! 

 

See the Pen KKLdmQL?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

 

 

[dpickering]

Thanks for sharing those examples, I can see how some of those might be helpful in dealing with the math/rotation of the SVG. I played around with using motionPath for the autoRotate feature and it's getting closer

See the Pen LYoGpbO by dpickering (@dpickering) on CodePen

If you move your cursor up or down you'll see that each tire track svg isn't following each other by staying on the polyline. 

[GreenSock]

It's beyond the scope of help we can provide for free in these forums, but perhaps this will help get you going in the right direction: 

See the Pen yLWOGxo?editors=1010 by GreenSock (@GreenSock) on CodePen