[Lottie Animations] How to use Lottie Animation

Forge Component
(3)
Published on 5 Jul by Sérgio Sardo
3 votes
Published on 5 Jul by Sérgio Sardo

Hello Mates, 


I'm trying to make a demo on using Lottie plugin to handle the splash screen with a moving logo for my company.


Here is what I did after uploading the logo json file to the resources folder. 


Here is the output error now 


Please Help if I'm missing something cause its not working !!


Best Regards, 

Mohamed AlMokadem

Hi Mohamed,

Can you share the json so I can try to debug it on my side?

Cheers,

Henrique Batista wrote:

Hi Mohamed,

Can you share the json so I can try to debug it on my side?

Cheers,

Hi Henrique, 


Thanks for you reply. 


Actually I have tried more than one also tried to download from Lottie web site itself, but sadly nothing happened. The same white empty screen. 

Please check the attached file judgement.json  I have downloaded it from Lottie site too.


Cheers,

Hi Mohamed,

I was able to made it work, just pointed to the resources url. You can check it here.

Are you sure that your URL is the correct one? Beacause I'm using it like this:

Don't forget to deploy the resource to a target directory.

Other question, do you have any layout on that page?


Cheers

Hi Henrique, 

I have tried the same json files but I think I'm still missing something 

Can you check my properties here If you can find it. 

Yes I have layout on my screen 



Note: I'm using it on the same module so I think I don't need to set a Target Directory 


Cheers,

Hey Mohamed,

You have samples on the component itself.

I don't know if that Path is correct, like I pasted on the image on above post. Do you ahve any constraint to not add the .json as a resource?

Cheers

Hi Henrique,


Can you send the .oml file?


_Navaneethan

Hi _Navaneethan,

The component itself has the examples, just open it and take a look.

Cheers

Hi Henrique,


You are telling about this?. When i open in browser, it shows the module does not contain default entry.

this module has one web block and four server actions only. no screens are  in this module.

if any sample is using this animation, please redirect it to me.


i am asking your  oml file, 


Thanks,

_Navaneethan

Henrique Batista wrote:

Hey Mohamed,

You have samples on the component itself.

I don't know if that Path is correct, like I pasted on the image on above post. Do you ahve any constraint to not add the .json as a resource?

Cheers

Hello Henrique,


I can't see the path from your picture  it's not complete. 


Or please send a sample oml cause the module does not have any samples, It only contains a web block to use. 


Thanks for your concern.

Cheers,

Mohamed AlMokadem


Solution

Mohamed ElMokadem wrote:

Hi Henrique, 

I have tried the same json files but I think I'm still missing something 

Can you check my properties here If you can find it. 

Yes I have layout on my screen 



Note: I'm using it on the same module so I think I don't need to set a Target Directory 


Cheers,

Hi Mohamed,


keep your container first then web blog. like below it will work

Regards,

Pankaj

Solution

Thank you Henrique Batista  for your concern and replies, Its always a very small specific reason why its not working :)

@Pankaj pant  Hahah Thank you Its working now, I tried every thing, but not this one :)  

This happens to me every time while using javascript. :)


Hi Mohamed/Pankaj,


Still i dont get that. can anyone send youe oml.?


Thanks

_Navaneethan

Hi Navaneethan,

My, mistake, I was under the impression they were under the same app.

Here you go.

Cheers

Hi Henrique,


Thanks for your reply and your .oap file .its working fine. 

I changed deploy action as deploy to target action to Do nothing. 

Thanks Mohamed and Pankaj.


_Navaneethan

How to customize? For instance lets say that i want to change the color.

Filipe Lourenço wrote:

How to customize? For instance lets say that i want to change the color.

In order to change color, you have to edit JSON file in Adobe After Effects.


Regards,

Pankaj


Hi Filipe,

Just to add on Pankaj post that sometimes your animations colors can be edited here, but it fails a lot of times.

Cheers

Hi Henrique thank you for your response.

Yes i know that but yes it fails sometimes thats why i was asking

Hi, 

Just want to ask, did anyone manage to trigger Complete or LoopComplete ?

I already try simple things (and also the oap that Henrique Batista provided) and the Complete and LoopComplete doesnt trigger.

Thanks

Henrique Batista wrote:

Hi Filipe,

Just to add on Pankaj post that sometimes your animations colors can be edited here, but it fails a lot of times.

Cheers

but that is just the colours, do you know another way instead of adobe after effects to edit?


Hi Filipe,

Sorry for the late reply.

I think Keyshape also reads/edits/exports the lottie animations, but never tried it though.

I've only used the online editor to change some colors on the exiting animations.

Cheers

Just to inform you All.


Now it is possible to edit the colors as well as the background in https://lottiefiles.com website.




Regards,

Pankaj


Hi,

  That oml doesnt work me.