Jump to content
Search Community

Disappearing Line Trail on Mouse Hover?

JohnEllosit test
Moderator Tag

Recommended Posts


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!



disappearing line trail.gif

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.


  • Like 1
Link to comment
Share on other sites

Logic-wise, as you're using canvas, what I would do is store each point in an array and limit the array's 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


  • Like 2
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...