Libraries for simulating line drawing

@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.

@drewbullen
exactly what I need.

here another example

GRAZIE!!

@drewbullen,

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. :smile:

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.

Yes, all should work, but when it doesn't you should reduce the problem to the minimum number of elements necessary to isolate the issue. There are many moving parts (i.e. external libraries & remote images) in the file you posted that make it difficult or impossible to troubleshoot.

Anyway, here is such a minimal example showing how to declare and implement your animation object using the vivus library.

Drawing.hype.zip (20.4 KB)

Thanks for that reply @drewbullen.

I understand that you declared a var by naming it drawing. But for the logic in me I cannot connect this var with a DOM element in the Hype document for it to work in my head.

to Add: if I understould you correct, this 300x250 has to many objects moving around in the Hype document for this .svg to animate? If so… it’s a shame.

Hi Dennis @Bendora,

There is a problem with your vivus.js file I believe.

Try using the latest distribution. I have attached them here for you to download.

There was an error that stated it could not find variable “Pathformer”. I re-uploaded the latest file to your project and it worked!

vivusFiles.zip (12.4 KB)

Also here is your original document edited. (a little bit of tidying up too :wink: )

burgernah.zip (137.8 KB)

1 Like

"drawing" isn't a DOM element but the SVG element is. "drawing" is just a way to connect the methods in the virus library to the SVG.

1 Like

Thanks and I am curious of the tidying up. :smile:

Yeah shame it was the .js file. good to know in the future.

Just in your head HTML you had references to the resources that didn’t need to be there :wink:

Also, the myCallback function didn’t need to be there in the “animateSVG” function. These are just small things and depending on your project may need to be included but this is a “blank slate” for you to now continue from :smile:

D

1 Like

So after hours and hours of debugging (looking for a Pathformer) to find out it was the .js library was faulty. Thank you DBEAR and DrewBullen for your assistance.

I now got a ‘oh no no’ back from the costumer. That is not what they needed. :slight_smile: Ain’t this job fun.

Wonder if you could take a look at this as I have followed your instructions but cannot get the browser to draw a simple mast shape!

https://drive.google.com/open?id=0BwPna00gIRIlWVlnRTJ0NTB6NTg

I think the problem is in your SVG - you need a “path” to animate and there isn’t one!

a much easier way would be to do this (instead of inline code)

<object id="my-svg" type="image/svg+xml" data="${resourcesFolderName}/link/to/my.svg"></object>

then you can use the same <script> calls but not have to worry about inline SVG code.

NOTE You must put this code in the innerHTML of a rectangle element.

So, if my svg was called “mySVG.svg” I would create a rect element and then “Edit innerHTML” and put:

<object id="my-svg" type="image/svg+xml" data="${resourcesFolderName}/mySVG.svg"></object>

and then on scene load run a function with …

new Vivus('my-svg', {type: 'delayed', duration: 250});

Even better you could do it the following way and you don’t have to add any inline code. Just use a standard element and the SVG will change to said element’s size.

Create a rectangle element … change it’s size to whatever you want (optional) … give it an id (e.g mySVG) and then add this code to the function “on scene load”

new Vivus('mySVG', {type: 'delayed', duration: 200, file: '${resourcesFolderName}/mySVG.svg'});
3 Likes

Thank you Drew, I realised that just because you can save something to SVG doesn’t mean it can be animated. I have since drawn a path representation and it works. Your back to basics example is well appreciated!

A post was split to a new topic: Pause timeline and jump to scene