Skip to main content
Parts4Arts
Parts4Arts
Inspiring
August 5, 2021
Question

Free Javascript for SVG frame by frame animation

  • August 5, 2021
  • 3 replies
  • 1334 views

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

    This topic has been closed for replies.

    3 replies

    R
    rdr4
    Participant
    July 20, 2023

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

    Parts4Arts
    Parts4ArtsAuthor
    Inspiring
    August 9, 2021

    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 

     

      m1b
      Community Expert
      m1bCommunity Expert
      Community Expert
      August 7, 2021

      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
      Parts4ArtsAuthor
      Inspiring
      August 7, 2021

      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
      Community Expert
      m1bCommunity Expert
      Community Expert
      August 7, 2021

      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

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices