What elements using to add an animated SVG?

[digitalseeds]

Hello,
I want to achieve an animated SVG. I’ve got the HTML and CSS code in 2 separate files.
I’ve tried several options with elements: DIV, raw content, CSS customization etc… but none of them work. I did not find out the good combination of where to put the HTML code and where to put the corresponding CSS code.

Can you please advise what Pro element I should use for HTML, what to use for the CSS code?

Many thanks in advance,

[tristup]

Hi @digitalseeds,

Thanks for reaching out.
You need to use the Lottie element for SVG animation, you can add the CSS code into the Customize > Element CSS attribute of the same element.

Hope it helps.
Thanks

[digitalseeds]

Thank you for your answer.
What URL is expected here?
To animate my SVG I have a HTML file and a CSS file, and I can’t see anywhere I could put the HTML in the Lottie element?

[prakash_s]

Hello @digitalseeds,

Please have a look at this documentation to learn more about how to use the Lootie element.

Lottie | Themeco Docs

Hope it helps
Thanks

[digitalseeds]

Hello @prakash_s,

Unfortunately it does not help because the document explains that Lottie animation works with URL or JSON file, and I’ve got a HTML and CSS file with keyframes.
Is Lottie element the only way to manage animated SVG on Pro?

[tristup]

Hi @digitalseeds,

You can add the HTML code into the Raw Content element and add the CSS code into the Element CSS of that element or Page CSS of the page where it has been used. Also, you can add the URL of the SVG or HTML or Canvas in the Lottie element to get it to work.

Hope it helps.
Thanks