Sliding image as I scroll down the page

Using Streamlit
,
1

Hi! I’m trying to design the main page of an app and I wanted to make that when you scroll down the page a text or image appears sliding in from the left (or right, its the same), like its a fade in.The code I pasted below works only for the text that appears as i open the website. But as i scroll down the animation doesnt happen. According to chatgpt i should inject some javascript but that didnt work. Can anyone help me please? Thanks in advance <3

st.markdown(
    """
    <style>
    @keyframes slideInLeft {
        0% {
            transform: translateX(-100%);
            opacity: 0;
        }
        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    .slide-in-left {
        animation: slideInLeft 1s ease forwards;
        text-align: justify;
    }
    </style>
    """,
    unsafe_allow_html=True,
)

st.markdown('<h2 class="slide-in-left" id="slide-in-left">Your text here</h2>', unsafe_allow_html=True)
2

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.