try again

css/dark-style.css

@@ -469,17 +469,30 @@ footer {
   flex: 1 1 300px;
 }
 
-/* Animation Classes */
+/* Animation Classes - Updated for better compatibility */
-.fade-in {
+.fade-in, .slide-up {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+  will-change: opacity, transform; /* Performance hint for browser */
 }
 
 .slide-up {
-  opacity: 0;
+  transform: translateY(40px); /* More pronounced effect */
-  transform: translateY(40px);
+}
-  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
+
+.fade-in.animated, .slide-up.animated {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Always show animations on mobile devices to avoid issues */
+@media (max-width: 768px) {
+  .fade-in, .slide-up {
+    opacity: 1;
+    transform: translateY(0);
+    transition: none;
+  }
 }
 
 /* Responsive Design */

index.html

@@ -84,37 +84,37 @@
       <p class="text-center">Ombi transforms how you manage your media server with these essential features:</p>
       
       <div class="features-grid">
-        <div class="feature-card ">
+        <div class="feature-card slide-up">
           <i class="fas fa-user-friends feature-icon"></i>
           <h3>User Management</h3>
           <p>Connect to your Plex or Emby server and automatically sync users, giving them a personalized request experience.</p>
         </div>
         
-        <div class="feature-card ">
+        <div class="feature-card slide-up">
           <i class="fas fa-search feature-icon"></i>
           <h3>Smart Search</h3>
           <p>Powerful search capabilities to find TV shows and movies across multiple providers with rich metadata.</p>
         </div>
         
-        <div class="feature-card ">
+        <div class="feature-card slide-up">
           <i class="fas fa-robot feature-icon"></i>
           <h3>Automation</h3>
           <p>Seamless integration with Sonarr, Radarr, CouchPotato, SickRage, and more to automatically fulfill requests.</p>
         </div>
         
-        <div class="feature-card ">
+        <div class="feature-card slide-up">
           <i class="fas fa-bell feature-icon"></i>
           <h3>Notifications</h3>
           <p>Customizable notifications through various channels to keep users updated on their requests.</p>
         </div>
         
-        <div class="feature-card ">
+        <div class="feature-card slide-up">
           <i class="fas fa-lock feature-icon"></i>
           <h3>Request Approval</h3>
           <p>Optional approval system for admins to manage and control what content gets added to your server.</p>
         </div>
         
-        <div class="feature-card ">
+        <div class="feature-card slide-up">
           <i class="fas fa-mobile-alt feature-icon"></i>
           <h3>Mobile Apps</h3>
           <p>Native mobile applications for iOS and Android for on-the-go request management.</p>
@@ -224,6 +224,18 @@
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/simplelightbox/1.12.1/simple-lightbox.min.js"></script>
+    <!-- Fallback for animations if main script fails -->
+    <script>
+      // Ensure content is visible after a delay even if animations fail
+      setTimeout(function() {
+        document.querySelectorAll('.fade-in, .slide-up').forEach(function(el) {
+          if (window.getComputedStyle(el).opacity < 1) {
+            el.style.opacity = 1;
+            el.style.transform = 'translateY(0)';
+          }
+        });
+      }, 2000);
+    </script>
     <script src="js/javascript.js"></script>
     
     <!-- Global site tag (gtag.js) - Google Analytics -->

js/javascript.js

@@ -60,7 +60,7 @@ $(document).ready(function() {
   //   showCounter: false
   // });
 
-  // Scroll animations for elements with animation classes
+  // Improved scroll animations for elements with animation classes
   function revealOnScroll() {
     var scrolled = $(window).scrollTop();
     var windowHeight = $(window).height();
@@ -69,20 +69,29 @@ $(document).ready(function() {
       var $this = $(this);
       var offsetTop = $this.offset().top;
 
-      if (scrolled + windowHeight - 100 > offsetTop) {
+      // Trigger animation when element is 200px from entering viewport
-        $this.css({
+      if (scrolled + windowHeight > offsetTop - 200) {
-          'opacity': 1,
+        $this.addClass('animated');
-          'transform': 'translateY(0)'
-        });
       }
     });
   }
 
-  // Run once on page load
+  // Run once immediately to show elements above the fold
+  revealOnScroll();
+
+  // Run again after a short delay to catch all elements
   setTimeout(revealOnScroll, 100);
 
-  // Run on scroll
+  // Run on scroll with throttling for performance
-  $(window).on('scroll', revealOnScroll);
+  var scrollThrottleTimeout;
+  $(window).on('scroll', function() {
+    if (!scrollThrottleTimeout) {
+      scrollThrottleTimeout = setTimeout(function() {
+        revealOnScroll();
+        scrollThrottleTimeout = null;
+      }, 50);
+    }
+  });
 
   // Navbar scroll effect
   $(window).scroll(function() {