Clip-path animation with GSAP

clip-path-animation-with-gsap.markdown

Clip-path animation with GSAP

Using GSAP Timeline to create a masking effect for a background image.

A Pen by Lefteris Theodossiadis on CodePen.

License.

index.html

<div class="container">
  <figure class="masked"></figure>
</div>

script.js

// get image information
var img = new Image();
img.src = 'https://images.unsplash.com/photo-1476522590778-ce524105b925?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ';
var ratio = img.width / img.height;
console.log( "Ratio: "+ratio );

$('.masked').imagesLoaded( { background: true }, function() {
  var tl = new TimelineMax(  { repeat:-1, repeatDelay:4 } );
  tl
  .set( '.masked', { backgroundSize: "+=125% +=125%" } )
  .to( '.masked', 0.35, { clipPath:"polygon(50% 0%, 51% 0%, 51% 100%, 50% 100%)" } )
  .to( '.masked', 0.45, { clipPath:"polygon(40% 0%, 51% 0%, 51% 100%, 40% 100%)" } )
  .to( '.masked', 0.7, { clipPath:"polygon(70% 0%, 51% 0%, 51% 100%, 70% 100%)", ease: Power4.easeOut } )
  .to( '.masked', 1.4, { clipPath:"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100% )", ease: Power2.easeOut } )
  .to( '.masked', 1, { backgroundSize:"100% 100%", ease: Power3.easeInOut },  "-=1" );
});


 

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>

style.scss

body {
  padding: 0;
  margin: 0;
  background: #111111;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
}


figure {
  /* reset */
  margin: 0;
  
  position: absolute;
  top: 64px;
  left: 64px;
  width: 80%;
  height: 80%;
  background-image: url(https://images.unsplash.com/photo-1476522590778-ce524105b925?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0px 0px 160px 80px rgba(0,0,0,0.3);
}

.masked {
  clip-path: polygon(20% 0%, 20% 0%, 20% 100%, 20% 100%);
}