在滚动时按顺序显示容器中的元素

Question

我正在使用Scroll Reveal进行滚动显示动画。我想要做的是在达到位置时按顺序显示容器的子项。我怎样才能做到这一点？我发现很难理解它的文档。

这是我的代码，

<div class="container-fluid features" style="padding-bottom: 75px;">
            <h2 style="text-align: center;">Features</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="featureOne">
                        <div class="row">
                            <div class="col-md-10">
                                <h3>Lorem</h3>

                            </div>
                            <div class="col-md-2">
                                <img src="img/cog-upd.png" style="margin-top: 42px;position: absolute;right: -55px;" />
                            </div>
                        </div>

                    </div>
                    <div class="featureTwo">
                        <div class="row">
                            <div class="col-md-10">
                                <h3>Lorem</h3>

                            </div>
                            <div class="col-md-2">
                                <img src="img/task-upd.png" style="margin-top: 50px;position: absolute;right: -55px;" />
                            </div>
                        </div>

                    </div>
                    <div class="featureThree">
                        <div class="row">
                            <div class="col-md-10">
                                <h3>Lorem</h3>

                            </div>
                            <div class="col-md-2">
                                <img src="img/payment-upd.png" style="margin-top: 50px;position: absolute;right: -55px;" />
                            </div>
                        </div>

                    </div>
                </div>
                <div class="col-md-4">
                    <img class="ipad" src="img/ipad-center.png" style="display:block;margin:auto;padding-top: 35px;" />
                </div>
                <div class="col-md-4">
                    <div class="featureFour">
                        <div class="row">
                            <div class="col-md-2">
                                <img src="img/integration-upd.png" style="margin-top: 50px;position: absolute;left: -55px;" />
                            </div>
                            <div class="col-md-10">
                                <h3>Lorem</h3>

                            </div>

                        </div>

                    </div>
                    <div class="featureFive">
                        <div class="row">
                            <div class="col-md-2">
                                <img src="img/ach-upd.png" style="margin-top: 50px;position: absolute;left: -55px;" />
                            </div>
                            <div class="col-md-10">
                                <h3>Lorem</h3>

                            </div>

                        </div>

                    </div>
                    <div class="featureSix">
                        <div class="row">
                            <div class="col-md-2">
                                <img src="img/config-upd.png" style="margin-top: 50px;position: absolute;left: -55px;" />
                            </div>
                            <div class="col-md-10">
                                <h3>Lorem</h3>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>

滚动显示代码，

<script>
        window.sr = ScrollReveal();
        sr.reveal('.ipad', {
            duration: 500,
            origin: 'bottom'
        });
        sr.reveal('.featureOne', {
            duration: 1000,
            origin: 'left',
            delay: 500
        });
        sr.reveal('.featureTwo', {
            duration: 1000,
            origin: 'left',
            delay: 800
        });
        sr.reveal('.featureThree', {
            duration: 1000,
            origin: 'left',
            delay: 1300
        });
        sr.reveal('.featureFour', {
            duration: 1000,
            origin: 'left',
            delay: 1800
        });
        sr.reveal('.featureFive', {
            duration: 1000,
            origin: 'left',
            delay: 2200
        });
        sr.reveal('.featureSix', {
            duration: 1000,
            origin: 'left',
            delay: 2600
        });
    </script>