Перемещение элементов при скроллинге определённого блока

необходимо реализовать перемещение блоков из "пустоты" на свои места при скроллинге.

Пример правильно собранных блоков:

https://jsfiddle.net/35rdx60s/15/

.main-block {
  width: 300px;
  height: 200px;
  background-color: pink;
}
.first-stroke {
  width: 100%;
  height: 100px;
  display: flex;
}
.second-stroke {
  width: 100%;
  height: 100px;
  display: flex;
}
.size {
  width: 100px;
  height: 100px;
}
.block-red {
  background-color: red;
}
.block-orange {
  background-color: orange;
}
.block-green {
  background-color: green;
}
.block-yellow {
  background-color: yellow;
}
.block-blue {
  background-color: blue;
}
.block-brown {
  background-color: brown;
} 

При появлении главного блока в области видимости экрана при скроллинге все 6 элементов встают на свои места. Как это можно реализовать? хелп пожалуйста...