Anime.js is an awesome little library that will help you to animate almost everything.
Awesome because it's only 11kb, it has some really cool features and it's fairly easy to use.

Here is an example with a Gallery.

Step 1

Go to this page to download the minified version of the JS file: https://github.com/juliangarnier/anime/
Upload and enqueue the JS file :

wp_enqueue_script( 'anime-js', plugin_dir_url( __FILE__ ) . 'assets/js/anime.min.js', '', '', true );

[ see HOWTO to learn how to add custom files ]

Step 2

Create a Gallery and Add this code in a Code Block element :

anime({
  targets: '.oxy-gallery-item',
  scale:[0,1],
  rotate:[90,0],
  duration: 2000,
  delay: anime.stagger(100)
});

Explanations:

• We target the gallery items with the .oxy-gallery-item class,
• We animate some CSS transforms properties: Each image will scale from 0 to 1, and rotate from 90 to 0 deg.
• The total duration is set to 2s.
• Then finally, the stagger option will increase the delay for each element separately.

It's just an example to see how it works, but we are not finished yet.
As we are dealing with images, we have to be sure they are loaded before trigging the animation. And we also have to set the opacity to 0, so we won't see them while they are loading.

Step 3

In the gallery Hover settings, change the Image Opacity to 0 :

Step 4

Change the previous code by this one. The function will run when the document is 'ready' (fully loaded).
Note that we have also added the opacity property. It will animate the opacity from the initial state to 1 :

(function($) {
    'use strict';
    $(document).on('ready', function() {

        anime({
            targets: '.oxy-gallery-item',
            scale: [0, 1],
            opacity: 1,
            rotate: [90, 0],
            duration: 2000,
            delay: anime.stagger(100)
        });

    });
})(jQuery);

Note

Don't forget to use the Waypoints library if you want the animation to start only when it enters the viewport. Here is an example :

(function($) {
    'use strict';
    $(document).on('ready', function() {

        var waypoints = $('#_gallery-4-527').waypoint(function(direction) {

            anime({
                targets: '.oxy-gallery-item',
                scale: [0, 1],
                opacity: 1,
                rotate: [90, 0],
                duration: 2000,
                delay: anime.stagger(100)
            });

            this.destroy()
        }, {
            offset: '80%'
        })
    });
})(jQuery);

More info about Waypoints :
Trigger a function when you scroll to an element

Here are some other fun examples: