Free Javascript for SVG frame by frame animation

[Parts4Arts]

Hello,

I have written a Javscript for frame by frame SVG Animation using artboards as frames. 

It's free to use. It has a tutorial in English and German. And it comes with some examples. Have fun with it.

See

https://www.behance.net/gallery/124761797/Javascript-for-Illustrator-FrameByFrameSVGjsx

[m1b]

Hi @Parts4Arts, thanks heaps for sharing your script. I've had a quick play with it and I love it. Very clever idea, too! 🙂

Will definitely make donation if I end up using in a job.

- Mark

[Parts4Arts]

Hello Marks,

I'm glad, that you like the javascript. Please let me know, if you have a wish to make it even better. I will do a second version soon with some changes to make the svgs smaller.

Best regards, Jens.

[m1b]

That's great, Jens. I'll keep my eye out for the new version. My only first-off suggestions are to (1) add option to set the animation-iteration-count and (2) maybe also to cleanup the exported svg files afterwards so it only leaves the animated svg file.

Bringing the file size down is always a great idea. I noticed there was a huge file size difference in your sample files—between 35KB and 5.1MB. In my test I made a little character with body parts that were symbols. The file repeated the symbol definitions for each frame, so that would be an instant savings. I'm sure that's the sort of thing you had in mind.

Anyway, thanks again, very impressive idea!

- Mark

[m1b]

Oh I guess another nice thing to be able to set would be the timing of individual frames, ie. user gives an array of seconds (or percentages) and script converts into percentages for the green numbers in the css:

@keyframes frame-1 {0% {opacity: 1; }10% {opacity: 0; } }

[Parts4Arts]

Yes. I have simular ideas. But I have to create an UI for this and save the settings for a repetition of the export. (So much ideas ... so little time.) I will do it, step by step.

The Updates will be found in here and on https://www.behance.net/jensulkriebel 

- Jens.

[Parts4Arts]

The new version 1.7 is available (ZIP-Archive, 28.5 MByte). 

• What is new in the script?
  1.7 Commands such as "pattern, symbol, linearGradient, radialGradient", which
  have identical content in several frames, are written together in front of the frames
  in order to obtain a smaller file.
• 1.6 The individual SVG files that the script saves are automatically deleted again by
  the script if desired. You will find the settings from line 62 in the script.
• 1.5 Messages appear either in English or in German. No more language mix.

You can find more Javascripts at https://www.behance.net/jensulkriebel 

[rdr4]

The link is no longer working. Can we get a new one?