Update my_pages/pre_information_loss.py

my_pages/pre_information_loss.py

@@ -11,6 +11,31 @@ def render():
         "and returning as you wish, or follow the guided tutorial which will go through all pieces in order.", 2)
     ]
 
-    add_fadein_text(paragraphs)
+    # add_fadein_text(paragraphs)
+    # Define CSS fade-in animation
+    st.markdown("""
+        <style>
+        @keyframes fadeIn {
+            from {opacity: 0;}
+            to {opacity: 1;}
+        }
+        .fade-in {
+            animation: fadeIn 1.5s ease-in forwards;
+            opacity: 0;
+            margin-bottom: 1em;
+            font-size: 24px;
+            color: #A6C8FF;
+            text-align: left;
+        }
+        </style>
+    """, unsafe_allow_html=True)
+
+    # Create one placeholder for each paragraph
+    placeholders = [st.empty() for _ in paragraphs]
+
+    # Reveal paragraphs sequentially
+    for i, p in enumerate(paragraphs):
+        placeholders[i].markdown(f"<div class='fade-in'>{p[0]}</div>", unsafe_allow_html=True)
+        time.sleep(p[1])  # delay (seconds) before showing next one
     
     add_bottom_navigation("landing", "information_loss")