Animating with the Clip-Path CSS property

The Clip-path CSS property is definitely one of my favorite CSS property.
It's easy to use and you can have lots of fun with it :)

Let's start with a simple example, an image:

Then we add this CSS. A Clip-path and a transition, as we are animating the shape on hover:

Note that all the shapes were made with https://bennettfeely.com/clippy/

.imagefx {
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: 0.3s ease clip-path;
}

.imagefx:hover {
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 0);
    clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 0);
}

Note that the shape (a polygon here) must have the same number of points if you want to animate it.

Animation on Scroll

To make it more interesting, instead of having a hover effect, we will animate the clip-path on scroll (when it appears on the viewport).

We have AOS (Animation On Scroll) in Oxygen, but we need to customize it.
As explained in this tutorial: Customize the Scroll Animation Effects

Step 1

Add an image and create a new class '.imagefx1' :

Step 2

Enable the Animate On Scroll effect and choose fade as animation type:

Step 3

Add a Code Block with this custom CSS:

.imagefx1[data-aos=fade] {
    -webkit-clip-path:: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    transition: 1s ease clip-path !important;
    opacity: 1;
}

.imagefx1[data-aos=fade].aos-animate {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

And now you can see the result:

Note that it doesn't need to be an image, it can be a Div with some content:

Example with a Gallery

As you may know, we can only apply the Animate On Scroll effect to the full gallery (the Div that contains all the images), but not to each images individually. So in order to do so, we have to add some Javascript.

First, let's create a new class, with another clip-path shape (a circle this time):

.imagefx2[data-aos=fade] {
    -webkit-clip-path: circle(0% at 50% 50%);
    clip-path: circle(0% at 50% 50%);
    transition: 2s ease clip-path !important;
    opacity: 1;
}

.imagefx2[data-aos=fade].aos-animate {
    -webkit-clip-path: circle(100% at 50% 50%);
    clip-path: circle(100% at 50% 50%);
}

To apply the AOS effect to each image of the gallery, we need to add some Data Attributes, plus a Class:

(function($) {

    $('.oxy-gallery-item-contents img').attr('data-aos', 'fade');
    $('.oxy-gallery-item-contents img').attr('data-aos-anchor-placement', 'center-bottom');
    $('.oxy-gallery-item-contents img').addClass('imagefx2');

    AOS.refreshHard();

})(jQuery);

And now, each image will be animated individually when they appear in the viewport.
The effect works better with a Masonry layout.