Input animations for text and divs when scrolling on the page

I've seen this practice becoming increasingly common, where page elements are "appearing" ( fade-in, slide-in, etc.) automatically when, by giving scroll , you enter a new section / div. I gave a searched , but I did not find what it takes to really learn how it works and how to put it into practice.

I quickly searched for a site that saw such a feature. Of course it was not difficult to find. I just put "Bootstrap themes examples" on google that most already had such animations.

Check out a particular example that I really liked: "Material Style Theme (Bootstrap)

My questions are:

• What is done?
• How is it done?
• Where do I find (in what library?) examples to study and learn more?
• Is the page loading stalled because of this feature?

Example of a section of my site that would like the effects:

<div class="site-wrapper">
<div class="site-wrapper-inner" id="portofolio">

    <br />
    <br />
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading" style="color:white">Portfolio</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-sm-6 portfolio-item">

                <img style="width:360px;Height:200px" src="Imagem-removida-por-questões-profissionais" class="img-responsive" alt="">

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>Título</h4>
                    </div>


                    <div class="panel-body">
                        <p class="text-muted">Descrição</p>
                    </div>
                </div>
            </div>



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

In this case, I would like the following div to be animated:

  

class-col-md-4 col-sm-6 portfolio-item

Please note that I searched here, but did not find it necessary: