Animation for div when it enters the viewport horizontally

by Vijay Pancholi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

CSS

.item {
    width: 500px;
    height: 250px;
    background: red;
    color: #fff;
    display: inline-block;
    opacity: 0.2;
    transition: opacity 0.5s ease; /* Add a transition for a smoother effect */
  }

  .item.show {
    opacity: 1;
  }

JavaScript

$(function() {
    $(".item").each(function() {
      var $this = $(this); // Store the reference to the original DOM element

      $this.waypoint(function() {
        $this.addClass('show'); // Use the stored reference here
      }, {
        offset: '100%',
        horizontal: true
      });
    });
  });