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…
@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 });
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’ )
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
@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.