5

How to create svg animation like this? https://cl.parspack.com/clients/templates/ps_seven/img/svg/header.svg

I search on google but I can't any way to create animation with svg format file like this. Adobe After Effects, Adobe Animate and Adobe Edge Animate can't export file by svg format for animation!!

3

3 Answers 3

5

It seems that the svg you link to is animated using CSS Animations. Read about it on W3Schools and CSS-Tricks.

Inspecting the moving elements with browser Developer Tools by pressing F12 is revealing:

These animations could be hand coded by editing the SVG file in a text editor. But the source code contains tons of animation keyframes.

This seems like too much work to do manually. It must have been generated by some kind of SVG animating software.

Searching Google for "svg animation" gives a lot of results. For example the first on my list: svgator, which seems to be a paid application which enables you to make SVG animations in a graphical interface without coding. There might be free alternatives too, although I couldn't find any which didn't require coding.

To my knowledge (please correct me if I'm wrong) none of Adobe's applications are capable of exporting SVG animations. The closest thing i found is this plugin for Adobe Animate, but sadly it seems to be discontinued.

5
  • Thank you for your answer. But not any application like adobe apps for design animation with svg format file? Because create animation by codding is very time consuming.
    – mghhgm
    Nov 28, 2019 at 21:40
  • Did a little more googling. See my update.
    – Wolff
    Nov 28, 2019 at 21:42
  • I used Adobe Animate https://helpx.adobe.com/animate/using/exporting-svg-format.html before but with this way, it just export svg from first frame!
    – mghhgm
    Nov 28, 2019 at 21:49
  • Just played around with Animate and you are right. I should keep my mouth shut about things I'm not sure about, sorry. 😊
    – Wolff
    Nov 28, 2019 at 22:13
  • No dear friend. Thank you so much for your attention.
    – mghhgm
    Nov 28, 2019 at 22:16
2

SVG files can have declarations for class and/or IDs.

That file is merely using the animation ability of Cascading Style Sheets v3 (CSS3) to introduce animation based upon various IDs.

#el_hAVKZVGCL * {
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);
    animation-timing-function: cubic-bezier(0, 0, 1, 1); }

And...

#el_DFuNmafRaa_an_QQ_Jhl6Ej {
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-transform: translate(285.1300048828125px, 387.6100158691406px) translate(-285.1300048828125px, -387.6100158691406px) translate(0px, 0px);
    transform: translate(285.1300048828125px, 387.6100158691406px) translate(-285.1300048828125px, -387.6100158691406px) translate(0px, 0px);
    -webkit-animation-name: kf_el_DFuNmafRaa_an_QQ_Jhl6Ej;
    animation-name: kf_el_DFuNmafRaa_an_QQ_Jhl6Ej;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

This is all done via CSS. Whether or not you can use an Adobe app to generate the proper CSS is another matter.

2
  • Thank you for your answer. But not any application like adobe apps for design animation with svg format file? Because create animation by codding is very time consuming.
    – mghhgm
    Nov 28, 2019 at 21:29
  • Adobe Animate focuses on canvas animations, not CSS animations. And After Effects focuses on video (obviously). To the best of my knowledge neither After Effects nor Animate will export CSS animations. They have to be created via CSS.
    – Scott
    Nov 28, 2019 at 21:52
1

As Scott mentioned, Adobe Animate focuses on canvas animations, not CSS, and AE on video. As far as I know, there are certain plugins that you can use to force the export of an SVG file, but it isn't exactly the best solution. I haven't tried them out yet.

I prefer to use SVGator if I need a single SVG file and there's no Adobe product that would allow you to set interactivity like Animate on mouseover, on click, and so on.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.