scrollreveal.js and flexbox

Question

I'm experiencing an issue with using scrollreveal.js together with flexbox.

I've created a few two-column rows along the page using display flex and when trying to reveal each column separately with the scrollreveal reference only one of them are working.

Any workaround while still being able to maintain the flex attributes?

HTML

<div class="grid">
  <div class="column __50 __reveal">one</div>
  <div class="column __50 __reveal">two</div>
</div>

CSS

.grid {
  display: flex;
}

.column.__50 {
  width: 50%;
}

JS

window.sr = ScrollReveal({
  distance: '30px',
  duration: 1000,
  scale: 0
});
sr.reveal('.__reveal');

Answer 1

If I understand you clearly:

1. Given- the existing code
2. When- page is scrolled
3. Then- Columns should scroll into view

I've provided a snippet that shows that it does work based on your code but you have to give enough space for the scrollreveal effect to take place.

TO TEST

Add a div that takes up the space from the initial view.

Add a height to the .column.__50 class so you can see it in action.

Add a border so you can see how they are placed, you can always comment the border out after you no longer need it. Good practice for 'debugging' and visualizing your divs.

window.sr = ScrollReveal({
        distance: '30px',
        duration: 1000,
        scale: 0
    });
    sr.reveal('.__reveal');

.grid {
  display: flex;
}
.column.__50 {
  width: 50%;
  height: 800px;
  border: 2px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/4.0.0-beta.25/scrollreveal.js"></script>
<div class="grid">
  <div class="column __50 ">
    No class="__reveal 1"
  </div>
  <div class="column __50 ">
    No class="__reveal 2"
  </div>
</div>
<div class="grid">
  <div class="column __50 __reveal">
    one
  </div>
  <div class="column __50 __reveal">
    two
  </div>
</div>

Answer 2

As I understand, You have to pass a sequence interval (in milliseconds) to the reveal() method, making sequenced animations a breeze.

sr.reveal('.__reveal', 300);

You can read the documentation from this reference link

Stack Snippet

window.sr = ScrollReveal({
  distance: '30px',
  duration: 1000,
  scale: 0
});
sr.reveal('.__reveal', 300);

.grid {
  display: flex;
  font: 13px Verdana;
  flex-wrap: wrap;
}

.column.__50 {
  width: 50%;
  height: 100px;
  background: red;
  border: 8px solid #ffffff;
  border-radius: 20px;
  padding: 20px;
  color: #fff;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<div class="grid">
  <div class="column __50 __reveal">one</div>
  <div class="column __50 __reveal">two</div>
  <div class="column __50 __reveal">three</div>
  <div class="column __50 __reveal">four</div>
</div>