How to animate a bg image to slide down when scrolling over section

[aaron4osu]

I’m trying to create a slide in animation where the the column (.squeegeeBg) slides in from above. I have the basics working, but I don’t want to image to display over the section before it animates.

Right now I’m using the Animate On Scroll Library. Maybe there is a cleaner way? It’s partially working on my dev environment. I tried to create a codepen but it’s not working there for some reason.

here is a code pen

<style>
.white{
  color:#fff;
}
.waterbgSkyDk{
	background: rgb(38,48,92);
    background: linear-gradient(to right, rgba(11, 21, 61, 0.83), rgba(38, 48, 92, 0.8) 49.58%, rgba(38, 48, 92, 0.7)), url('https://ktwindow.signal614.com/assets/img/water-window-bg.jpg');
    background-repeat:no-repeat;
    background-position: center center;
    background-size: cover;
}

.squeegeeBg{
    background: linear-gradient(90deg, rgba(38,48,92,.0) 0%, rgba(38,48,92,.0) 46%, rgba(38,48,92,.0) 100%), url('https://ktwindow.signal614.com/assets/img/window-squeegee.png');
    background-repeat:no-repeat;
    background-position: center center;
    background-size: cover;
}

.swipeSection li{
	font-size:26px;
	line-height: 60px;
	color:#fff;
	font-weight: 600;
}
.squeegeeBg{
	padding:200px 0px;
}


</style>
<section class="swipeSection waterbgSkyDk">
  <div class="container h-100">
    <div class="row h-100">
      
      <div class="col-6 my-auto">
        <h2 class="white headingLg">LOREM IPSUM<br>DOLORSIT AMET</h2>
        <h3 class="white headingSm">LOREM IPSUM DOLORSIT AMET ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT U</h3>
      </div><!-- close col -->
      
      <div class="col-6 squeegeeBg h-100">
        <ul class="list-unstyled text-center">
          <li>LOREM IPSUM DOLORSIT</li>
          <li>LOREM IPSUM DOLORSIT</li>
          <li>LOREM IPSUM DOLORSIT</li>
          <li>LOREM IPSUM DOLORSIT</li>
        </ul>
      </div><!-- close col -->
      
    </div><!-- close row -->
  </div><!-- close container -->
</section>

[PaulOB]

@aaron4osu

ut I don’t want to image to display over the section before it animates.

I’m not sure what you meant by that phrase exactly. Did you mean you didn’t want to see it outside of the blue background (e.g. hide the overflow)?

i.e. Like this: