Canvas + ScrollTrigger

[ferriss 7 Likes (Newbie)]

Hi,

 

Trying to get an animation working together from a couple of examples.

 

I've got the perfect setup for the SVG path and speed, but this is a single path, I'm of the understanding that I require this so be done via Canvas if I want to apply a rough brush effect seen here — 

See the Pen GJrxdR by lbebber (@lbebber) on CodePen

 

Unless there is another way to apply a rough brush effect and maintain an animation, but I suspect not as it needs to follow a single path?

 

Couldn't find any examples that mix this brush effect and canvas.

 

Thanks

See the Pen ZEXveqV by CHEWX (@CHEWX) on CodePen

[OSUblake 18,367 Likes (Superhero)]

You could try using masking, like on this excellent tutorial by @PointC

 

https://www.motiontricks.com/svg-calligraphy-handwriting-animation/

 

[ferriss 7 Likes (Newbie)]

Thanks, I used a mask!

 

It's a bit dis-jointed and feels hacky, I think using Canvas would be better, but it's fine for my example.