Animate classes and blocks

First, an example of how to implement animation on classes or specific blocks, using the Animate.css script.

Header injection

<script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
</script>

Footer injection

<script>
  $( ".meta-title" ).addClass( "animated fadeInLeft" );
  $( ".meta-description" ).addClass( "animated fadeInLeft" );
</script>

Adds the class .animated to the element you want to animate. You may also want to include the class .infinite for an infinite loop. In the example above .metatitle and .meta-description are the selectors and fadeInLeft an effect from Animate.css. 

There are some 80 different effects to choose from at Animate.css:

Animate on scroll

It gets even more interesting with animate on scroll. Here is an example where two blocks are animated on scroll with Animate.css and Wowmin.js – the script that handles the reveal on scroll.

Header injection

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Footer injection

<!-- Initialize script -->
 <script>
        new WOW().init();
</script>
<script>
    $('#block-name').addClass('wow fadeOut');
    $('#block-name').addClass('wow bounceIn');
    //$('#block-name').addClass('wow className');
</script>

<!-- Duration, delay etc -->
<script> 
    $('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.4s'}); 
</script>

An alternative to WOWmin.js is the ScrollReveal script (that makes no use of Animate.css):

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script type="text/javascript">

window.sr = ScrollReveal({reset: true});
sr.reveal('#block-yui_3_17_2_1_1526475982557_4266', {duration: 1500, delay: 500, distance: '200px'});
sr.reveal('#block-5afc2e0c2b6a28e917011aaa', {duration: 1500, delay: 500});
sr.reveal('#block-5afd8624aa4a998566aa5916', {duration: 1500, delay: 500});
</script>

Yet another instruction video (a very good one, indeed) comes from Chris Schwartz from Schwartz-Edmisten Website Design.