Lottie vector animation

[lalalandsynth]

Been nerding out with Illustrator and After effects , managed to make a Lottie file , but it looks a bit wrong.
Anyone worked on this setup to make sliders etc that can provide me with workflow tips ?
Also, not sure if i have a problem but rLottie can take forever to load the code or just freeze.

[lalalandsynth]

So, been messing with this , Illustrator - Output via "Overlord" which allows to push/pull to After Effects , maintaining gradients etc ( Recommended addon for Illustrator) , then I animate in after fx, output as Json via Bodymovin.

Json into rLottie and into Hise .

This all "works" but there seem to be some differences on SOME of the tests , some are perfect and some have different shadings and "contrast" or something , not sure .
Having said that , this is extremely promising , I can envision doing the whole Gui in Illustrator or similar program , exporting Vectors , animate with after fx etc.

[lalalandsynth]

I discovered that for Bodymovin to work correctly the After Effects project must be saved , then the look is preserved!

Nice.

I also notice quite a bit of "ghosting" , maybe its some sort of issue with the number of frames ? I render as 128 frames.
I have not tried exporting in a plugin and seeing if its the same.

[gorangrooves]

@lalalandsynth looks great. If you have the time and are inclined to make a short video of the procedure you do to create an animated vector, it would be much appreciated. We'd love to see it!

[lalalandsynth]

@gorangrooves Sure , will do that :)

[Christoph Hart]

If you‘re on a mac, check out Keyshape, I found it to be the most promising tool for creating vector animations that work reliably as lottie file.

The original AfterEffects bodymovin plugin looks incredibly hacky and its extremely easy to create something that can‘t be exported properly, while on the other hand the keyshape app is much more limited than After effects, but everything you do there should be exportable.

[lalalandsynth]

@Christoph-Hart Are you referring to the ghosting ? Because I seem to have everything else working properly at the moment.
I am on Win mostly but also Mac.

Keyshape looks promising !

[lalalandsynth]

@Christoph-Hart It seems that the biggest problem for me is that the rLottie just chokes on a lot of the animations. It might work eventually if I waited but it just freezes.

EDIT: I waited for 15 minutes , it cant handle some of these files.

[lalalandsynth]

Trying out the Keyshape Workflow.
Seems easy to use , I am more familiar with Illustrator and after fx though.
Have to do some more testing to see as there are some limitation to the lottie export. but it works.

Does anyone have a snippet to make it behave like a knob in terms of how it responds to the mouse , I am just using the lottie example and its not suitable.

[lalalandsynth]

You can get some nice looking stuff with combining png overlays on top of Vectors . That obviously means that you can use "large" png , scalable static images that will not take that much space.

[lalalandsynth]

@Christoph-Hart Been trying out Keyshape and its very promising but I am always having a problem with the rLottie crashing on larger more involved animations .

This is obviously quite large so I tried to do this one part at a time , still just crashes.
https://lottiefiles.com/share/pP4lQh

Any chance of having a look at that or is there another way of bringing in vector animations?

[ustk]

@lalalandsynth Effectively this animation is less than 134000 characters long :)

But honestly, something like that can be done in Hise with a paintRoutine (or several)
It's not really easy but doable

[lalalandsynth]

@ustk Yes, this is extremely large but it also crashes on much simpler ones.
I also exported just parts of it but still crashed.

[lalalandsynth]

@ustk said in Lottie vector animation:

It's not really easy but doable

In Keyshape ...it easy ;)

[ustk]

@lalalandsynth If it crashes with smaller animations, it's maybe because some processes are not Hise friendly.
I know nothing of Lottie files, but I remember that some processes (like shading, transparency or something I don't imagine...) can lead to some incompatibilities.
Don't ask, that's all I know :)

So maybe you should begin with fewer processes and bring them one by one so you know what is incompatible (and tell us :) )

[lalalandsynth]

@ustk Will do , I am experimenting :)

This does not work.
https://lottiefiles.com/share/F3HrLN

This Works. https://lottiefiles.com/share/Nk5rGv

So one these shapes below work , but not multiple so either it cannot handle larger files or it has a problem with them overlapping ? Trying two of them next

Ok tried two and it crashes , I have seen much more elaborate animations in HISE that work.
So this works
https://lottiefiles.com/share/A1YfWb

But this does not , only a small addition.
https://lottiefiles.com/share/zE77ud

Tried this to check if it was the overlap, that does not seem to be the issue .
Conclusion so far . One shape works , as soon as I add another , non overlapping , the rLottie app crashes when I copy the json into it.
https://lottiefiles.com/share/woBSyQ

Certainly this is a much more complex animation then I am making but this works ?

[lalalandsynth]

@lalalandsynth Anyone been using this with any luck ?

Setting this up again with the needed apps , After FX - Bodymovin for exporting from After FX as Rlottie and Overlord to import into After FX from Illustrator.

The Rlottie converter crashes a LOT , It seem to have to do with the file size of the Json , would it be possible to know what are the limits , if there are limits to the file size. It hard to do any animation and not knowing if it will convert or not.

[lalalandsynth]

Lottie Animator , for PC and MAC

https://www.haikuforteams.com/animator/

[ustk]

@lalalandsynth I've seen that some time ago and it seems very cool, but the pricing is a deal-breaker...

[lalalandsynth]

Yes, agreed .
Have you used any Lottie stuff so far ?