Animated SVG files

[rob.monkman]

Hi Bubbler!

I’m trying to add some small animation to my website but I’m a little stuck…

For example, if I wanted a small animated images like the one shown in the link below, can I do that on Bubble? If so does anyone know how?

https://beta.designforventures.co/Free-Animated-SVG-Icons/warehouse/vinyl-dj-dark-grey.svg

Check this one out below also, these are so cool, I need them in my life!!

http://preview.codecanyon.net/item/flat-design-desk-banners-animated-svg/full_screen_preview/10912902?_ga=2.146520945.493755702.1587634703-1980058743.1587633730

Thanks in advance
Rob

[anders.eidergard]

For animation I’ve used Lottie (lottiefiles.com) quite a bit recently.

There’s a plugin for it but you can use a simple html for it too.
Just paste the code you get from Lottie into your html-object.

[rob.monkman]

OMG!!! I was looking into this for about 2 hours, read you reply and in apx 120 seconds I have animation on my site!! Thank you so much Anders!!

[J805]

I was using this too but then I realized that not all browsers are able to view the animation and it came up blank on the screen. Using Edge or IE would come up blank for my users. Do you experience the same thing?

[anders.eidergard]

I don’t ever use IE/Edge so I’ve not had that blank experience.

[J805]

Yeah. I don’t have them either but some users do. That’s the only way I found out too.

[rob.monkman]

Hi, thanks for point this out, I’ve not done heavy testing on this yet so thanks for the heads up.

Perhaps a show/hide rule could help to switch the user to just a standard image based on thier browser… though I’ve not tried to ‘get user browser’ before so no idea how complex this is!?