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

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>


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:

1 Like