Using GSAP Timeline to create a masking effect for a background image.
A Pen by Lefteris Theodossiadis on CodePen.
Using GSAP Timeline to create a masking effect for a background image.
A Pen by Lefteris Theodossiadis on CodePen.
<div class="container"> | |
<figure class="masked"></figure> | |
</div> |
// 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" ); | |
}); | |
<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> |
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%); | |
} |