Skip to content

Instantly share code, notes, and snippets.

Created October 7, 2015 13:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/29f76f0460345b95bb6f to your computer and use it in GitHub Desktop.
Save anonymous/29f76f0460345b95bb6f to your computer and use it in GitHub Desktop.
Black & White
<div id="black"></div>
<div id="text">BLACK<br><span>& WHITE</span></div>
$(window).on("load click resize", function() {
var $black = $("#black").css("clip", "");
var w = $(this).width(), h = $(this).height();
var t = 0, r = w, b = h, l = 0;
this.tl && tl.stop();
tl = new TimelineLite();
l = w/2 - 60;
tl.to($black, 0.25, {clip: "rect("+[t,r,b,l].join()+")"}, 0.5);
b = h/2;
tl.to($black, 0.25, {clip: "rect("+[t,r,b,l].join()+")"});
r = w/2 + 108;
tl.to($black, 0.25, {clip: "rect("+[t,r,b,l].join()+")"});
t = h/2 - 60;
tl.to($black, 1.75, {clip: "rect("+[t,r,b,l].join()+")", ease: Elastic.easeOut});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300);
#black {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000;
clip: rect(0 100vw 100vh 0);
}
#text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 60px;
line-height: 60px;
font-family: "Roboto Condensed";
text-align: right;
}
#text span {
color: #000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment