• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
3

Free Javascript for SVG frame by frame animation

Engaged ,
Aug 05, 2021 Aug 05, 2021

Copy link to clipboard

Copied

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

TOPICS
Import and export , Scripting

Views

749

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe
Community Expert ,
Aug 06, 2021 Aug 06, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Aug 06, 2021 Aug 06, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 06, 2021 Aug 06, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 06, 2021 Aug 06, 2021

Copy link to clipboard

Copied

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; } }

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Aug 06, 2021 Aug 06, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Aug 09, 2021 Aug 09, 2021

Copy link to clipboard

Copied

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 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 20, 2023 Jul 20, 2023

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines