blastergod
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by blastergod
-
-
Hello
This did not work for me. I was using the exact code you wrote, or am I mistaken?
I used
var elem=document.getElementById("theMask"); var paths = elem.getElementsByTagName("path");
And then:
for (let i = 1; i < paths.length; i++) { tl.add("path"+i); tl.to(paths[i], {duration: 0.75, drawSVG:true}, "path"+i); tl.to("#hand", {duration: 0.75, motionPath:{path:paths[i], align:paths[i]} }, "path"+i); }
And it does not work. I tried adding the pen <g> at the end, made no difference.
-
Hello,
I managed to get it working by using the SVG masked, and revealing it using the stroke animation.
The only problem I am facing, is that the "pen" that should follow the lines is not showing. Probably because the stroke animation is used as the mask.
How can I fix this? Any ideas?
See the Pen poqRQRz by Cristian-M (@Cristian-M) on CodePen
Thanks!
Vlad
-
Thank you for the explanation.
I understand your point, and it makes sense.
What I am trying to do is see if I can "simulate" hand drawing animation over any SVG path (without preparing it).
Even if it does not follow the outline perfect, but simply reveals part of the svg in an animation. Speeding up the animation will make it look like the shape is drawn by hand.
I want to know if that is possible, because I am using a tool to convert BMP to SVG paths. The BMPs are white and black shapes like the ones you see in my example.
The tool then converts the images to svg paths and they look perfect.
I just need a solution to draw them part by part, to simulate a hand drawing.
Thank you
Vlad
-
Hello,
I am considering buying GASP but I am trying it first.
I want to simulate a hand drawing effect on a more complex path.
I modified the hand drawing example, but unfortunately the results are not what I expect, and I don't know if I am doing something wrong.
You can check my codepen at:
Any help is appreciated.
First, I don't know exactly what mistake I made that the hand is not transparent background.
The problem is that as you can see, the svg shape is drawing faster than the hand is moving, with multiple points starting at the same time.
Can this be solved? So the shape is drawn by the hand 100% ?
Thank you!
Vlad
See the Pen MWzRYWM by Cristian-M (@Cristian-M) on CodePen
Animated handwriting not working as expected
in GSAP
Posted
Thank you! It seems it works. I understand now what you did, you took the motion path from maskreveal not from the mask.
I will try to work on the mask a bit. I am doing this programatically.
The problem was that drawing the image (without mask) was outlined, so the end result was not good.
I tried to remove some paths and see if I get a better result, but it seems I didn't.
I will do more digging.