remove the id from the svg-container.
add the id to the svg-tag itsself
<svg id="blablabla" .....
it’ll run 
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.
Thanks for your help. I see now that the existing ID wasn’t for the SVG but for a group.
<g id="layer1">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.
do I need the jquery.min.js to run the animation or just vivus.js?
It’s a bit heavy on the file load for a banner.
As with all things new. I am confused atm. for understanding a things as simple as this svg animation.
So after thinking to have connected the dots. I seem to end up with nothing.
Adding the file:
300x250_FUFH_Familien_AB_Master2.zip (186.3 KB)
The used Div on the Hype canvas with svg id:
The reused function with the svg id:
jQuery isn't required for this library to work.
good. Still can’t get it to work. I guess I am doing the SVG buildup wrong. But not sure. It’s costing me hours. 
Something is missing here for me to understand it. Let me recap with DrewBullen’s demo file.
1: add a SVG with ID "aniSVG"
2: add the Vivus script to a function that makes a new var and assigns this to the ID from the SVG:
new object = new Vivus(‘aniSVG’, {type: ‘delayed’, duration: 150}),
3: use a trigger inside of Hype to start the animation: onLoad, onClick, etc…
4: all should work.