What elements using to add an animated SVG?

Support
#1

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,

#2

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.

image
image388×905 18.6 KB

Hope it helps.
Thanks

#3

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?

#4

Hello @digitalseeds,

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

Hope it helps
Thanks

#5

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?