Animate a div when we scroll to a specific position

Question

I have a function that decrease the width of the slider-side-hr to 0 when scrolling from the top of the page to -600 of the scrolling div height (which means before reaching the bottom of the scrolling div ).
The slider sides are both fixed, one to right and the other to the left.

  <div class="tower" id="tower2">
      <div class="scroll-slider-hr">
          <div class="slider-side-hr slider-side1"></div>
          <div class="slider-side-hr slider-side2"></div>
      </div>
  </div>

It works perfectly fine and the width of both slider-side-hr decreasing to 0 when scrolling, but I have a problem when the scrolling div is NOT on the top of the page.

I need a condition that executes the function ONLY when ( scrolling div ) reaches the bottom of the page + 100px , which means I can see the slider-side-hr full width first (with 100px of the scrolling div height ) then it starts to decrease to 0 on scrolling, and it should decrease to 0 when reaching half of the scrolling div

 var $scrollingDiv = $("#tower2"); $(window).scroll(function() { var winScrollTop = ($(document).scrollTop() + 0); var zeroSizeHeight = $scrollingDiv.height() - 600; var newSize = 250 * (1 - (winScrollTop / zeroSizeHeight)); $('.slider-side-hr').css({ width: newSize, }, 500, 'easeInOutSine'); });

 .container-full { width: 100%; margin-right: auto; margin-left: auto; } .tower { position: relative; } #tower1 { /*margin-bottom: 700px*/ } #tower2 { background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)); background-position: center; background-size: cover; background-repeat: no-repeat; height: 140vh; background-attachment: fixed; position: relative; overflow: hidden; } .slider-side-hr { position: absolute; top: 0; bottom: 0; width: 250px; height: 100%; background: #ddd; } .slider-side1 { left: 0; } .slider-side2 { right: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <dic class="container-full"> <div class="tower" id="tower1"> </div> <div class="tower" id="tower2"> <div class="scroll-slider-hr"> <div class="slider-side-hr slider-side1"></div> <div class="slider-side-hr slider-side2"></div> </div> </div> </div>

Answer 1

How this code works:

JS

Takes information about the location from top of #tower2 and assigns it to the variable ftop

From ftop we subtract the scrolling value. When this value becomes less than 0, the transmission of a new value to .slider-side-hr begins.

The initial value of the width of .slider-side-hr is set to 50% of the width of #tower2

If you want to change the "animation" speed ... change this line:

var newSize = zeroSizeWidth + scl; to this var newSize = zeroSizeWidth + scl * 2;

(If you want the animation to be responsive for desktop and mobile you can make the value * 2 to be a percentage of the screen width)

CSS

The change made is of class .slider-side-hr value width: 100%;

I hope I've been helpful

 var $scrollingDiv = $("#tower2"); var ftop = $scrollingDiv.offset().top; var zeroSizeHeight = $scrollingDiv.height(); var zeroSizeWidth = $scrollingDiv.width() / 2; $(window).scroll(function () { var winScrollTop = $(window).scrollTop(); var scl = ftop - winScrollTop; if (scl < 0) { var newSize = zeroSizeWidth + scl * 2; } else { var newSize = zeroSizeWidth; } $('.slider-side-hr').css({ width: newSize, }, 500, 'easeInOutSine'); });

 .container-full { width: 100%; margin-right: auto; margin-left: auto; } .tower { position: relative; } #tower1 { /*margin-bottom: 700px*/ } #tower2 { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); background-position: center; background-size: cover; background-repeat: no-repeat; height: 140vh; background-attachment: fixed; position: relative; overflow: hidden; } .slider-side-hr { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; background: #ddd; } .slider-side1 { left: 0; } .slider-side2 { right: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="container-full"> <div class="tower" id="tower1"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur ipsam fuga amet quaerat possimus qui impedit iure id. Accusantium expedita architecto doloribus ratione veniam itaque in iure assumenda ab? Obcaecati! Lorem, ipsum dolor sit. </div> <div class="tower" id="tower2"> <div class="scroll-slider-hr"> <div class="slider-side-hr slider-side1"></div> <div class="slider-side-hr slider-side2"></div> </div> </div> </div>