title: CSS/JS image slide out animation
body: <p>I'm trying to recreate an effect like this: <a href="https://www.brontidebg.com/product" rel="nofollow noreferrer">https://www.brontidebg.com/product</a>
  The main image at the top of the screen (to the left) has a really smooth animation out into the screen (same with the image at the bottom). When you scroll to either image, they animate out in the same manner.</p>
  
  <p>Here is what I've come up with:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="top"&gt;
    &lt;h1&gt;scroll down&lt;h1&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="block image-block slideright"&gt;
      &lt;figure&gt;
        &lt;img src="https://i.guim.co.uk/img/media/11d4c182d094199e26ddb36febe67123a9bbc93a/34_246_2966_4275/master/2966.jpg?w=700&amp;q=55&amp;auto=format&amp;usm=12&amp;fit=max&amp;s=4a5b5fe1d34627003607df532913292d"&gt;
      &lt;/figure&gt;
    &lt;/div&gt;
  
    &lt;div class="block text-block"&gt;
      &lt;h2&gt; Some text &lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.top{
    height:100vh;
  }
  h1{
    text-align: center;
  }
  
  .block{
    display: inline-block;
    height: 100vh;
  }
  
  .image-block{
  
  }
  
  figure{
    position: relative;
          overflow: hidden;
          height: 100vh;
          width: 34vw;
    text-align: center;
    margin: 0;
  }
  
  image{
    height: 100vh;
    width: 34vw;
    position: relative;
    object-fit: cover;
  }
  
  .slideright{
      transform: translateX(-34vw);
      transition: all .8s ease-out;
  }
  .slideright.slideinright{
      transform: translateX(0);
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code> $(window).scroll(function() {
  
      var winTop = $(window).scrollTop();
  
      $(".slideright").each(function(){
        var pos = $(this).offset().top;
        if (pos &lt; winTop + 600) {
          $(this).addClass("slideinright");
        }
      });
  
      $(".slideleft").each(function(){
        var pos = $(this).offset().top;
        if (pos &lt; winTop + 600) {
          $(this).addClass("slideinleft");
        }
      });
  
    });
  </code></pre>
  
  <p>Codepen (view in fullscreen since I'm using vh): <a href="https://codepen.io/Caj/pen/GdZwYP" rel="nofollow noreferrer">https://codepen.io/Caj/pen/GdZwYP</a></p>
  
  <p>As you can see, the image slides out as you scroll towards it, but it's not a smooth, professional looking animation like the example link. I'm also hoping to have the image slide out if you were to scroll up to the top and then back down (have the function run repeatedly, not just the first time you scroll to within view).  Thanks in advance!</p>