Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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!!
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.
https://helpx.adobe.com/animate/using/exporting-svg-format.html before but with this way, it just export svg from first frame!
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.
svg format file? Because create animation by codding is very time consuming.
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.
