Libraries for simulating line drawing

Hi there,
I’ m working on a project which need an effect just like the process that you’re drawing some lines, maybe like this:

An animation process of drawing the picture from A to B.
I don’t know if Hype can make it…
Anyone have some ideas? Thanks very much!!

1 Like

Hi !
I guess you can check this :
https://maxwellito.github.io/vivus/
http://lazylinepainter.info



http://janpaepke.github.io/ScrollMagic/examples/advanced/svg_drawing.html

2 Likes

In another way to explain it: If the background color is black, then I put a white solid on it (just like a mask). After that I use a small ball to do the motion path from A to B, then the mask will disappear along with the moving ball.

It also can make the effect, but I don’t know how to do this…

Thank you very much!! I’ll read it and have a try~~~~ :smiley:

Nice list of resources there, @kerguelen!

1 Like

I’ve attempted to do this using Vivus but don’t seem to be able to get it working. I’ve attached my Hype project if anyone can assist.

Thanks

svg draw.hype.zip (16.0 KB)

remove the id from the svg-container.
add the id to the svg-tag itsself

<svg id="blablabla" .....

it’ll run :slight_smile:

I thought I already had that…

id="layer1"

Anyway I removed the ID from the container, confirmed I had an SVG ID but it’s still not working.

sure¿ :wink: svg draw.hype.zip (15.9 KB)

3 Likes

Thanks for your help. I see now that the existing ID wasn’t for the SVG but for a group.

<g id="layer1">

so, if you want to control parts of an svg you may be better of with snap

Here is a demo Hype project showing how to use Vivius for animated line drawing.

ViviusDemo.hype.zip (77.8 KB)

2 Likes

@drewbullen great work!
I’ll check the demo project.
It is possible to make the animation off-line? I would embed all external resources.

thanks

I guess it is possible but then you would lose programmatic control of the animation (i.e. start, stop, loop, go fast, go slow, go backwards etc).

BTW, there are many easier ways to make this kind of animation off-line if you just want to pre-record it and play it back like a video.

@drewbullen Thanks for the reply.
Your method is perfect! …and the video is heavy ( for an app ).
Sorry but I don’t understand why all controls are lost if Offline.

Another question: How to add a delay in the beginning of the animation?
I tried with this without success

 obt1 = new Vivus('HumanSiloMW', {type: 'oneByOne', delay:200, duration: 250 });

Here an example with text and a shape (made with external boundary and elements).

I would add a delay to the second text and the monument elements.
I tried with “delayed” instead “oneByOne” but the animation seems the same
( ‘delayed’|‘async’|‘oneByOne’|‘script’ )

Thanks!

If the Vivius library isn’t working as you expect you should probably check its documentation or post a question there: https://maxwellito.github.io/vivus/

I would also check the nature of the paths inside your SVG - you may want to break them into separate animations and use Hype timelines to control the timing.

Graphically, this is what the Vivius library should be doing provided you have separate paths inside the SVG. You could achieve the same thing using Hype and a series of single path SVGs. Using the Hype method there would be more flexibility.

@drewbullen Thanks for the suggestion. I'll check the link

I made the monument in Illustrator and I've checked also the orientation and the origin of each line, maybe I have to check again the inside.
The monument is made in 2 parts, bonduary and inner elements.

obt1 = new Vivus('text_1', {type: 'oneByOne', duration: 600 });    
obt2 = new Vivus('text_2', {type: 'oneByOne', duration: 700 });	
obt3 = new Vivus('monument_1', {type: 'oneByOne', duration: 250 });	
obt4 = new Vivus('monument_2', {type: 'delayed', duration: 2200 });

I would also check the nature of the paths inside your SVG - you may want to break them into separate animations and use Hype timelines to control the timing.

how trigger the animation through the timeline?
Now the animation start on load the page

thanks again!

By using a timeline action that calls the "PlayFunction" function - just like the Replay Animation button currently does

@drewbullen thanks for your patience.
This is clear, sorry for the misunderstanding. my poor english…
How to avoid the auto start of the animation on load the page? I must simply hide the element a bit before the “PLAY” function?

or naother Function like obt1.reset().stop(); ?

I’ve updated the link with obt1.reset().stop(); and it works!
in the desktop browser the animations is ok, however in tablets ( both iphone and some android devices) the animation is slow and loses synchronization with the timeline.

Currently, the animation object is setup and run by an "onSceneLoad" function. Remove this and launch the same setup code in a way that suits you better. After the setup code is run once, you can use the .reset() , .stop() or .start() methods etc on the drawing object as needed.