Как сделать такую анимацию при скроле страницы?

Помогите пожалуйста с анимацией блока будомат. Я хочу добиться того, чтобы когда пользователь дойдет до секции offer (2ая секция) запускался скрипт (можно на ваниле или jquery) который соединит 3 части будомата вплотную, при этом, при скроле, сам будет опускаться вниз, примерно до конца своей родительской секции. Большое спасибо за помощь.

https://jsfiddle.net/dmitriyPHC/zdyqofug/37/

    <div class="container">
      <h1 class="header__title">hello ХАБР</h1>
    </div>
  </header>

  <section class="offer">
     <div class="container">
     <h2 class="offer__title">
          Второй заголовок
        </h2>
      <div class="budomat">
        <div class="budomat__item budomat__item--first"></div>
        <div class="budomat__item budomat__item--middle"></div>
        <div class="budomat__item budomat__item--last"></div>
      </div>
    </div>
  </section> ```