LOADING

Top 5 animation ideas with Clip-path

Discover the clip-path animation

Clip-path

Did you heard about it? I’m sure you did, but do you know how much power it has? At some point I was seriously underestimating this CSS property. I was shocked when understood that in combination with transition it can change the way website feels by 180 degrees.

Let’s begin with introduction with clip-path. I won’t be using official description from MDN, but rather describe it in my own words. It’s CSS property that can change shape of visible part of the element.


Let’s get a few examples:


.so-block-wrap
.so-block
.so-block { clip-path: none; }
.so-block { clip-path: polygon(28% 28%, 80% 18%, 71% 75%, 13% 91%); }
.so-block { clip-path: circle(32.9% at 50% 50%); }
.so-block { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

Before we move forward I would like to make your life easier, you can use this tool to create shapes with visual editor – https://bennettfeely.com/clippy/

What’s next? Transition!


Hover me! .so-block {
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
transition: all 0.3s ease;
}

.so-block:hover {
clip-path: polygon(14% 14%, 82% 28%, 78% 82%, 25% 76%);
}
Hover me! .so-block {
clip-path: circle(0% at 100% 0);
transition: all 0.6s ease;
}

.so-block:hover {
clip-path: circle(150% at 100% 0);
}

Where can it be used?

Now let’s move forward! Moving colored shapes around the canvas is quite boring, we can try to do something that can be used in real life projects.

05. Menu

dark

Here in a few words we have a full height menu with position absolute on the left side + it’s hidden with clip-path:

.so-menu {
  transition: all 1.3s cubic-bezier(.74,0,.24,.99);
  position: absolute;
  height: 100vh;
  top: 0;
  right: 0;
  width: 400px;
  box-sizing: border-box;
  padding: 100px 30px;
  background: #121212;
  clip-path: circle(0% at 100% 0); 
  z-index: 2;
}

Then once hamburger menu was clicked we need to add a class with updated clip-path property:

// CSS
.so-menu.so-active {
  clip-path: circle(150% at 100% 0);
}

// JS
jQuery(document).ready(function($) {
  
  // Hamburger click
  $('.so-trigger').on('click touch', function(e) {
    
    // add/remove .so-active class for menu
    $('.so-menu').toggleClass('so-active');
    
  });
  
})

04. Popup

dark

Very similar situation to menu example. Basically you just have a popup with absolute/fixed position that fills whole your screen, but you are hiding it with clip-path prop. And then on button click you are adding new class with updated clip-path:

.so-popup {
  transition: all 1.3s cubic-bezier(.74,0,.24,.99);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ea4b32;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(50% 50%, 85% 15%, 50% 50%, 15% 85%);
  pointer-events: none;
  z-index: 2;
}

.so-popup.so-active {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  pointer-events: unset;
}

03. Slider

dark

This example is a bit more complex, we will be using slick.js library for slider functionality. I’ll skip basic things like slider initializations and etc, let’s jump strait to the magic!

In HTML we have a separate block that will contain our images (.so-images) and separate block for text slider (.so-slider).

As for .so-images – both images has to be the same on page load and it should be image of the first slide. The idea here is that we have 2 images with position absolute. Image #1 will have z-index: 1 and image #2 with z-index: 2. Image #2 has 0 opacity and it’s hidden with clip-path. Also it has .so-active class with new clip-path property that will be used for animation.

As for .so-slider – each slide has data-image attribute with image link for that slide.

<div class="so-images">
  <div class="so-images-single">
    <img src="https://images.pexels.com/photos/3473569/pexels-photo-3473569.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="so-slider-single">
  </div>
  <div class="so-images-single">
    <img src="https://images.pexels.com/photos/3473569/pexels-photo-3473569.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="so-slider-single">
  </div>
</div>

<div class="so-slider">
  <div data-image="https://images.pexels.com/photos/3473569/pexels-photo-3473569.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="so-slider-single">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
  </div>
  <div data-image="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="so-slider-single">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
  </div>
  <div data-image="https://images.pexels.com/photos/2387793/pexels-photo-2387793.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="so-slider-single">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
  </div>
</div>

Slick slider has afterChange event, it will be triggered each time after slide change. In this event we will do following steps:

#1 – get image link for the new slide

var new_src = $('.so-slider-single.slick-current').data('image');

#2 – now let’s play with second image. We have to set opacity to 1 -> update src for <img> element -> add .so-active class with clip-path animation:

$('.so-images-single:nth-child(2)').css('opacity', '1');
$('.so-images-single:nth-child(2) img').attr('src', new_src);
$('.so-images-single:nth-child(2)').addClass('so-active');

#3 – setup setTimeout function with 1.4s timing (it’s equal to clip-path transition timing in CSS). Inside this function we will update first image with new src and hide second image again + remove .so-active class.

setTimeout(function() {
      $('.so-images-single:nth-child(1) img').attr('src', new_src);
      $('.so-images-single:nth-child(2)').css('opacity', '0');
      $('.so-images-single:nth-child(2)').removeClass('so-active');
}, 1400);

02. Icon

dark

01. Button

dark

Leave a Reply

Your email address will not be published. Required fields are marked *