How add lottie animation on background streamlit app?

[kostya_ivanov]

I have streamlit app and i need add lottie amination on this background. Animation - it is json file on my page.

Some code for open json file as lottie images:

import streamlit as st
from streamlit_lottie import st_lottie

@st.cache
def load_image_json(path):

    """ Load animation and images from json """

    with open(path, 'r') as j:
        animation = json.loads(j.read())
        return animation
        
back_image = load_image_json('image/background_gradient.json')

I try this, but is dont work:

page_bg_img = '''
<style>
.stApp {
background-image: {st_lottie(back_image, key='back')};
background-size: cover;
}
</style>
'''

st.markdown(page_bg_img, unsafe_allow_html=True)

[edsaac]

Lottie files are not supported in the types of images that can go in the background-image CSS property (Image file type and format guide - Web media technologies | MDN).

---

If you happen to have an animated SVG, here is how to encode it into the background-image property.

Code:

import streamlit as st
import base64

## Create a SVG image
svg_text = """
<svg version="1.1"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" fill="#8A2BE220" />
  <circle cx="150" cy="100" r="100" fill="#00ee6040">
      <animate
      attributeName="r"
      values="100;10;100"
      dur="2s"
      repeatCount="indefinite" />
  </circle>
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
"""

## Encode the SVG
svg_bstr = (base64.b64encode(bytes(svg_text,'utf-8'))).decode('utf-8')

## Insert the encoded SVG in the CSS style sheet
st.markdown(f"""
    <style>
        .stApp {{
            background-image: url(data:image/svg+xml;base64,{svg_bstr});
            background-position: center; 
            background-repeat: repeat; 
            background-size: cover; 
        }}
    """, unsafe_allow_html=True
)

" # 📐 SVG in the background"

for _ in range(5):
    cols = st.columns([0.5,2])
    with cols[0]: st.image("http://placekitten.com/200/300")
    with cols[1]: "Some repeated text"*50

[edsaac]

I totally missed that you could just fix the position of the iframe containing the lottie animation in the page

Code:

import streamlit as st

lottie = """
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets9.lottiefiles.com/packages/lf20_Q7WY7CfUco.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop  autoplay></lottie-player>
"""

st.markdown("""
    <style>
        iframe {
            position: fixed;
            top: 2rem;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            z-index=-1;
        }
    </style>
    """, unsafe_allow_html=True
)

" # 💮 Lottie in the background"
st.components.v1.html(lottie, width=310, height=310)

for _ in range(5):
    cols = st.columns([0.5,2])
    with cols[0]: st.image("http://placekitten.com/200/400")
    with cols[1]: "Some repeated text"*50

[kostya_ivanov]

@ edsaac Thank you very much, I will test soon