Запуск анимации рядом с другой во время прокрутки

Question

У меня тут небольшая проблема.

Как видите, мой код вызывает анимацию, когда мои box перемещаются 100px слева направо от меня, когда я прокручиваю на 1/3 высоты section-one div.

Как видите, в box есть line div, который увеличивается с 0px до 100px.

Вот в чем подвох: я хочу, чтобы переход line сработал вместе с моим элементом box. В настоящее время этого не происходит. Если я подожду больше 2s, то есть animation-duration из line, анимация закончится к тому времени, когда на экране появится box div.

Ниже я прикрепил свой код, а вот ссылка на мой Codepen.

Jade

.landing-page
.section-one
  .box.hidden
    .line

SASS

@mixin box()
  position: absolute
  width: 50%
  height: 50%
  background: red
.landing-page
  height: 100vh
  width: 100vw
  background: gray
.section-one
  position: relative
  height: 100vh
  width: 50vw
  background: lightblue
  display: flex
  justify-content: end
  align-items: center
  .box
    @include box()
    transition: 2000ms
    .line
      background: white
      height: 20px
      transition: 2000ms
      animation-name: test
      animation-duration: 2s
      animation-fill-mode: forwards
  .box.hidden
    opacity: 0
    transform: translateX(-100px)

@keyframes test
  0%
    width: 0px
  100%
    width: 100px

Jquery

$(document).ready(function () {
    var aboutEl = $('.box'),
        aboutElOffset = aboutEl.offset().top/3,
        documentEl = $(document);

    documentEl.on('scroll', function () {
        if (documentEl.scrollTop() > aboutElOffset && aboutEl.hasClass('hidden')) aboutEl.removeClass('hidden');
    });
});

Answer 1

Просто примените анимацию при удалении класса (проверьте комментарий в коде) :

$(document).ready(function() {
  var aboutEl = $('.box'),
    aboutElOffset = aboutEl.offset().top / 3,
    documentEl = $(document);

  documentEl.on('scroll', function() {
    if (documentEl.scrollTop() > aboutElOffset && aboutEl.hasClass('hidden')) aboutEl.removeClass('hidden');
  });
});

.landing-page {
  height: 100vh;
  width: 100vw;
  background: gray;
}

.section-one {
  position: relative;
  height: 100vh;
  width: 50vw;
  background: lightblue;
  display: flex;
  justify-content: end;
  align-items: center;
}

.section-one .box {
  position: absolute;
  width: 50%;
  height: 50%;
  background: red;
  transition: 2000ms;
}

.section-one .box .line {
  background: white;
  height: 20px;
  transition: 2000ms;
  /*remove it from here 
  animation-name: test;*/
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
/*Apply animation when there is no hidden*/
.section-one .box:not(.hidden) .line {  
  animation-name: test;
}

.section-one .box.hidden {
  opacity: 0;
  transform: translateX(-100px);
}

@keyframes test {
  0% {
    width: 0px;
  }
  100% {
    width: 100px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="landing-page"></div>
<div class="section-one">
  <div class="box hidden">
    <div class="line"></div>
  </div>
</div>

Вы также можете использовать переход для белого элемента:

$(document).ready(function() {
  var aboutEl = $('.box'),
    aboutElOffset = aboutEl.offset().top / 3,
    documentEl = $(document);

  documentEl.on('scroll', function() {
    if (documentEl.scrollTop() > aboutElOffset && aboutEl.hasClass('hidden')) aboutEl.removeClass('hidden');
  });
});

.landing-page {
  height: 100vh;
  width: 100vw;
  background: gray;
}

.section-one {
  position: relative;
  height: 100vh;
  width: 50vw;
  background: lightblue;
  display: flex;
  justify-content: end;
  align-items: center;
}

.section-one .box {
  position: absolute;
  width: 50%;
  height: 50%;
  background: red;
  transition: 2000ms;
}

.section-one .box .line {
  background: white;
  height: 20px;
  transition: 2s;
  width:0px;
}
.section-one .box:not(.hidden) .line {  
  width:100px;
}

.section-one .box.hidden {
  opacity: 0;
  transform: translateX(-100px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="landing-page"></div>
<div class="section-one">
  <div class="box hidden">
    <div class="line"></div>
  </div>
</div>