Disappearing Line Trail on Mouse Hover?

[JohnEllosit]

Hello!

I'm trying to create a line trail on hover, that follows your mouse.

 

So far, I've managed to create the line trail (in the codepen link here: ).

 

But, I don't want it to be infinite - I'd like it to start overwriting itself/disappearing at a certain length.

 

How can I make that possible? (I'm very new to JS)

 

Here's a gif example!

 

 

See the Pen YzJLxPm by johnellosit (@johnellosit) on CodePen

[PointC]

Our own @OSUblake has a few examples that should put you on the right path.

 

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

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

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

 

Happy tweening.

[JohnEllosit]

Hi Point C,

Thanks for sending!

However, I'm looking for a pixelated path (not smooth like the examples provided),

 

I'm looking more like the quality in my codepen and screenshot above - let me know if it's possible to adapt the above codepens?

[PointC]

That's all the demos that come to mind for me at the moment. I'd recommend searching CodePen for something similar if those demos don't work for you. If you have any GSAP related questions, we're always here to help with those. 

 

Best of luck with the project and happy tweening.

 

[Cassie]

Logic-wise, as you're using canvas, what I would do is store each point in an array and limit the array's size

https://stackoverflow.com/questions/38242891/limit-array-size

Then on each tick you'll need to clear the canvas, loop through the array, draw each point and then repeat.

This isn't really a GSAP solution though, canvas can be animated with GSAP but for stuff like this I prefer to look at it in terms of 'frame by frame' drawings. Draw, clear, draw, clear, draw, clear. Then you get what looks like animation, like a flip book.

That's all the help I have time for here but the coding train is great for starting to think in the right way for generative coding

https://www.youtube.com/@TheCodingTrain