Doubts when positioning animations on the screen

[Higorzenaide]

Hello, I’m new to using streamlit and I’m having difficulties trying to position an animation, is it possible to apply css to position it? Or do I have to use columns

My code is simple because I’m training and I want to be able to move the animation, up, down, sideways.

import streamlit as st
import json
from streamlit_option_menu import option_menu
from streamlit_lottie import st_lottie

with open(“C:\TeleSpeed\style\style.css”) as f:
st.markdown(f"{f.read()}",unsafe_allow_html=True)

def load_lottiefile(filepath:str):
with open(filepath,“r”) as f:
return json.load(f)

lottie_codding = load_lottiefile(r"C:\TeleSpeed\gif\animacao.json")

col1 , col2, col3 = st.columns([1,2,1])
with col2:
selected = option_menu(
menu_title = None,
options = [“Login”,“Cadastro”],
icons=[“door-open-fill”,“hdd-stack-fill”],
menu_icon=“cast”,
default_index=1,
orientation=“horizontal”,
)

if selected == “Login”:
with col2:
with st.form(“Login”):
st.markdown(“Painel de login”)
st.text_input(“Email”, placeholder=“Digite aqui seu E-mail”)
st.text_input(“Senha”, placeholder=“Digite aqui sua senha”, type=“password”)
st.form_submit_button(“Enviar”)
if selected == “Cadastro”:
st.warning(“Cadastro”)

st.markdown(“”"

.stlottie[data-key=‘gif’] {
margin-top: 100px;
margin-right: 200px;
}

“”", unsafe_allow_html=True)

st_lottie(
lottie_codding,
speed=1,
key=“gif”
)

[dataprofessor]

Hi @Higorzenaide

Yes, you can certainly adjust the positioning of any element in the web app. Just find the name of the CSS element of interest from the Inspect element functionality of Google Chrome then define the parameters to obtain the desired effect.

It seems you’re moving in this direction already in adjusting margin-top and margin-right for .stlottie.

If this is not working, perhaps you also also try adjusting the positioning as follows:

position:absolute; 
left:100px; 
top:50px;

where a negative value for left would allow you to go left and a positive value for left would allow you to go right. Similar, a negative value for top would allow you to move the object down while a positive value moves it up.

Hope this helps!