Move | Export to animated SVG?

Big day! Just opened the Move app for the first time and quickly did a tween/keyframe animation of one of the icons for my current project.

After exporting the animation, I was surprised to find that it was rendered as an mp4. Went back to see whether I missed some export options but couldn’t find any.

Does this mean that we can not export to animated SVG?

I was under the impression (and excited) that linearity being a vector-design company, Move would be able to export to SVG animation, rather than reverting to a bitmapped output.

Is this something that is a temporary solution, or are you really making Move a “regular” animation app, unlike SVGator, for example, which always stays in the vector domain (exporting to animated SVG as either CSS or JS)?

Here’s to hoping that animated SVG export is on your short-term roadmap.

1 Like

Hi Till! :blush: It’s great to see you here and thanks for trying Linearity Move!

We’re currently trying to figure out the best approach for export options, so your feedback is very much appreciated.

But first, can you please tell me exactly how you want to use animated SVG?

I have been playing with SVGator and they embed JS code directly into the SVG file. Will there be an optimized way to do this for complex animations? Because web browsers need to use caching technique to save traffic and not download external JS files all the time. With embedded SVG it will not be cache friendly.

But if you need something small like a UI icon or something, it might work.

So please provide use cases.

Also, what’s your opinion on the Lottie format?

1 Like

Hello Alexander,

I am at a doctor’s appointment right now, but will respond in the morning, with a couple of examples.

Still at the beginning of my anim SVG journey, but very excited about its possibilities.

More tomorrow, and with kind regards,
Till

Hello again, Alexander

For the past couple of years, my goal has been to keep the use of bitmap graphics in websites to an absolute minimum for reasons of size and scalability…I always aim to design content to look tack sharp at any size from mobile to UHD and found SVG the most straight-forward way to get there.

I am also always searching for ways to implement new web-technologies in engaging ways. Spent a lot of time in Spline 3D lately, as I find WebGL one of the most exciting technologies on the horizon. To me, the ideal website would be an infinitely zoomable vector space/canvas that is resolution-independent.

While I always have my own projects that I am edxperiemnting on, I am currently acting as the CCO (chief creative officer) of a startup called “globalnation.tv” and am in the process of replacing the temporary site I had to crank out for a first demo of our service/product at the Roxy Theater in W. Hollywood in November of last year. I ended up having to use the rather unstable and challenging Wix Studio (or rather Wix Editor) bc it was the only way to quickly pull off an email marketing campaign and site in a week…terrible CMS, though, I think.

The new site that I am working on now using Wix Studio (just as unstable as their old Editor) is using SVG backgrounds and graphics where possible…just to give you a first look, here is the staging site, which I am trying to make the main globalnation.tv site, today…but until I point our domain at it, you can take a peek (desktop-only for now, so please refrain from going there on mobile phone) at https://gntvcompany.wixstudio.io/gntv-2024-staging-2

The reason why I am so eager to get animated SVGs into the fold are manyfold, but one pressing need that I have is that I am trying to get away from Wix, and with WordPress/Elementor Pro being the most obvious solution, Elementor Pro (EP) is proving to come with its own set of limitations, the main one being that aligning foreground/background elements in a pixel-perfect manner, responsively, is costing me a lot of nerve.

So, if you looked the Wix URL above, you will see that our GNTV logo is being revealed with an animation to end up perfectly aligned with the background…since the curve that intersects the logo that I designed is the result of a carefully-considered composition of concentric circles, it is essential that the placement of the logo is pixel-perfect, and remains that way on all possible monitor-resolutions and aspect-ratios.

This was possible for me to achieve in Wix (surprisingly), but is proving to be impossible in EP, so far. The only solution that I see, atm, is to make the logo a part of the background SVG and animate it. However, my first test to use this animated SVG background in the Wix site is failing to animate. Forgot which method (CSS or JS, I chose on Exprot in SVGator, but I’ll try the other one soon).

So, that was a terribly long (sorry) answer to your simple question. :wink:

Now that brings me to your question about Lottie. I was wondering about the same thing, but haven’t looked into Lottie enough yet to have a qualified opinion. My gut reaction is that Lottie may be vastly more compatible than animated SVG is right now, but that’s just an intuition. Do you know what browsers fully support Lottoe animations right now, both as background and foreground elements? I’d love to find out more about it.

Hope that we can continue this conversation, Alexander, and make some strides toward making Move the de facto standard for SVG animation!

Warm regards from a cold Berlin,
Till

1 Like

The animated SVG was exported with the JS option, but even after exporting it again with the CSS option, it is still not animating as a background element in Wix and Safari Mac.

Wish I could find a solution for that…maybe Lottie would do it?

When I drag either one of those files into my Safari browser, they both animate fine (and they sure look glorious on a UHD display, full-screen, if I may say so!) Amazing, to think that the CSS version is only 13KB!

1 Like

Congrats with the Roxy Theater project! The globalnation background looks great, love this animation :heart_eyes: Also logo animation works well.

Answering on your questions.
Lottie browser support https://lottiefiles.com/supported-features

From my perspective, until you try it and see if it works, it’s not clear exactly what technology you need to use.

But as I mentioned we looking into that direction, and multiple export options is needed. Please keep the app updated! :wink:

Thanks for the kudos, Alexander

Currently looking for a way to convert my animated SVG background into a Lottie animation. The lottiefiles converter is useless for that, as it treats the SVG anim as a static file that it offers to animate with its lame animation templates. But I’ll keep looking, and I will keep Move updated, of course!

If you, or anyone here, happen to come across a capable animated SVG to Lottie converter, please let me know!

it treats the SVG anim as a static file

Yes, it might be… Is it possible to repeat animation in Lottie from scratch?

Thanks for the idea of converter. I’ll take a look into that!

Just looking at some YT videos about various Lottie animation workflows…might be possible to import my static SVG first Illustrator, then into After Effects from there, but unsure what AE’s export capabilities are.

Being that I am under immense deadline pressure right now, this may have to wait a bit.

Would be much easier if I could just go from Curve > Move > Lottie :wink:

Just watched this workflow example, and…umm…no.

The reason why I have been using Vectornator and then Curve for so long is because they are simple, unlike what I just watched. Linearity has the potential to dethrone Adobe for many tasks/purposes because of that simple fact.

I may just wait a bit until Linearity figures out their export module.

1 Like