<style>
/* Define the animation */
@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Apply the animation to the element */
.bricks-layout-item {
  opacity: 0; /* Start with opacity 0 so the element fades in */
}

/* Add a class to trigger the animation */
.animate-slide-up {
  animation: slide-up 0.5s ease-in-out forwards; /* Adjust animation duration and timing function as needed */
}

</style>

<script>

document.addEventListener("DOMContentLoaded", function() {
  // Get all the elements with the class bricks-layout-item
  var items = document.querySelectorAll('.bricks-layout-item');

  // Function to check if at least a portion of an element is in the viewport
  function isElementPartiallyInViewport(el) {
    var rect = el.getBoundingClientRect();
    var windowHeight = window.innerHeight || document.documentElement.clientHeight;
    var windowWidth = window.innerWidth || document.documentElement.clientWidth;

    var verticalVisible = rect.top <= windowHeight && rect.bottom >= 0;
    var horizontalVisible = rect.left <= windowWidth && rect.right >= 0;

    return verticalVisible && horizontalVisible;
  }

  // Function to handle the scroll event
  function checkVisibility() {
    items.forEach(function(item) {
      if (isElementPartiallyInViewport(item)) {
        item.classList.add('animate-slide-up'); // Add animation class
      }
    });
  }

  // Initial check on page load
  checkVisibility();

  // Listen for scroll events and check visibility
  window.addEventListener('scroll', checkVisibility);
});

</script>