The testimonials component is a very simple grid built with Salvattore. While it is a neat grid, we want to make it a little flashier. Let's simply add an animation from Animate.css, the fadeIn class, so that the grid appears to fade into view when the Testimonial tab is open:

    <div class="myphoto-testimonials-grid animated fadeIn" data- 
    columns> 

When a user clicks on the Testimonials tab, the tab panel will open and then the grid will fade into view.

We can go a bit further and actually apply an animation to the column groups to induce optimal motion sickness. In myphoto.css, we already leverage the data-columns attribute to allow Salvattore to create the column groups for the grid and apply the appropriate style:

    .myphoto-testimonials-grid[data-columns]::before {
        content: '4 .column.size-1of4';
    }

We can make the columns bounce into view by simply extending this rule to include the animated and bounceIn classes:

    .myphoto-testimonials-grid[data-columns]::before {
        content: '4 .column.size-1of4.animated.bounceIn';
    }

Now, when the tab is opened, the whole grid fades in while the column groups also have a bounce effect. It's a little crass, but it's effective. The resulting markup for the component should look like the following:

As far as Animate.css goes, that is all there is. A nice, simple, and elegant library for providing nice, simple, and elegant animations. For a full list of effects, take a look at the Animate demo website at https://daneden.github.io/animate.css/.

Next, we will take a look at a complementary library—Hover.