I am creating an animation from two videos (the first – a foldable shape, the second – a foldable shape). It will be on the hero banner, so when the user scrolls down 200 pixels, the first video will play (once), and then when the user scrolls up and gets to that section, the second video will play once and then stop.

I added a hiding class based on scrollTop and starting the video when it is in the viewport, but I have a problem with the video not starting when the page loads (it should only happen after scrolling these 200px) and I don’t know how to set the scroll values ​​to make it look smooth.

var $document = $(document),
    $firstVid = $('.first-video-anim'),
    $secondVid = $('.second-video-anim'),
    className = 'hidden';

$document.scroll(function() {
  if ($document.scrollTop() >= 200) {
    $firstVid.addClass(className);
    $secondVid.removeClass(className);
  } else {
    $firstVid.removeClass(className);
    $secondVid.addClass(className);
  }
});

/* jQuery in viewport library */
$document.ready(function ($) {
  "use strict";
  $(window).scroll(function() {
    $('video').each(function(){
      if ($(this).is(":in-viewport( 400 )")) {
        $(this)[0].play();
      } else {
        $(this)[0].pause();
      }
    });
  });
});

My code: https://codepen.io/Beata-Jakubowska/pen/RwmMWoW