I try to make an animation in hero banner containing:

1. first – a static image
2. second (expanding) animation after the user scrolls down 150 pixels
3. third (folding) animation after the user goes back and scrolls up to the visible area of ​​the hero banner
4. static image again when user reaches the top of the viewport

$(window).scroll(function(){
    if ($(this).scrollTop() > 150 ) {
      $('.first-img').addClass('hidden');
      $('.second-video-anim').removeClass('hidden');
    } else {
      $('.first-img').removeClass('hidden');
      $('.second-video-anim').addClass('hidden');
    }
});

$(document).ready(function(){
  $(".second-video-anim video, .third-video-anim video").each(function() {
    $(this).prop({
      controls: false,
      controlslist: "nodownload"
    });
    const observer = new window.IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          if (this.paused) {
            $(this).prop("muted", true);
            this.play();
          }
        } else {
          this.pause();
        }
      }, {
        threshold: 0.5,
      }
    );
    observer.observe(this);
  });
});

I made first 2 steps but wondering how then display my third element when user scrolls up to banner visible area. Animation videos are .mp4 files.

My code: https://codepen.io/Beata-Jakubowska/pen/RwmMWoW?editors=1010 (see in the full page view).