Jump to content
Search Community

Making brush/ribbon effect along a path

lukeseager test
Moderator Tag

Recommended Posts

I've been working on an animation idea for a good few weeks now, and I'm a little stumped as to if GSAP can do what I'm trying to achieve. 

 

I'm trying to create the effect of a brush or ribbon being drawn on screen and remaining there. I've got something close to what I want, but I can't find a way of getting the brush to remain on the page after it's drawn.

 

I have a pen which duplicates a shape (essentially a backwards 'S') along a path, which achieves the effect I want - temporarily. (Pen 2 below, I can't put the pen at this point in the post for some reason.

[https://codepen.io/lukeseager/pen/vYZdmpr]

 

This is very close to what I want, except that the brush disappears from the page after the animation is finished. 

 

I can't think of how I can get the shape to duplicate itself along a path and remain in place after it's animated out. I think my logic of duplicating my 'S' shape along the path isn't quite the right solution. 

 

Does anyone know if GSAP can achieve this effect in a simpler way? Or if I'm just missing something obvious with how I'm going about creating the effect. 

 

I do have another Pen, which follows the mouse, but this has the same issue:

See the Pen QWgQpmV by lukeseager (@lukeseager) on CodePen

See the Pen vYZdmpr by lukeseager (@lukeseager) on CodePen

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