Paste below code at Code Block > PHP & HTML

Face Up

Use class 'fade-up'

<style>
  .fade-up {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  /* Only hide on frontend after JS marks page as ready */
  .js-scroll .fade-up {
    opacity: 0;
    transform: translateY(60px);
  }
  .js-scroll .fade-up.show {
    opacity: 1;
    transform: translateY(0);
  }
  /* Keep visible in WordPress admin / builder */
  body.wp-admin .fade-up,
  .elementor-editor-active .fade-up,
  .fl-builder-edit .fade-up,
  .et-fb .fade-up {
    opacity: 1 !important;
    transform: none !important;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    document.body.classList.add("js-scroll");

    const items = document.querySelectorAll(".fade-up");

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("show");
        } else {
          entry.target.classList.remove("show"); // optional
        }
      });
    }, {
      threshold: 0.15
    });

    items.forEach((item) => observer.observe(item));
  });
</script>

From Right

Use class 'from-right'

<style>
  .from-right {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  /* Hidden state (only on frontend after JS loads) */
  .js-scroll .from-right {
    opacity: 0;
    transform: translateX(100px); /* 👉 from right */
  }

  /* Visible state */
  .js-scroll .from-right.show {
    opacity: 1;
    transform: translateX(0);
  }

  /* Keep visible in WordPress builders */
  body.wp-admin .from-right,
  .elementor-editor-active .from-right,
  .fl-builder-edit .from-right,
  .et-fb .from-right {
    opacity: 1 !important;
    transform: none !important;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    document.body.classList.add("js-scroll");

    const items = document.querySelectorAll(".from-right");

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        entry.target.classList.toggle("show", entry.isIntersecting);
      });
    }, {
      threshold: 0.15
    });

    items.forEach((item) => observer.observe(item));
  });
</script>

From Left

Use class 'from-left'

<style>
  .from-left {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .js-scroll .from-left {
    opacity: 0;
    transform: translateX(-100px);
  }
  .js-scroll .from-left.show {
    opacity: 1;
    transform: translateX(0);
  }
  body.wp-admin .from-left,
  .elementor-editor-active .from-left,
  .fl-builder-edit .from-left,
  .et-fb .from-left {
    opacity: 1 !important;
    transform: none !important;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    document.body.classList.add("js-scroll");

    const items = document.querySelectorAll(".from-left");

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("show");
        } else {
          entry.target.classList.remove("show");
        }
      });
    }, {
      threshold: 0.15
    });

    items.forEach((item) => observer.observe(item));
  });
</script>