Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created Oct 25, 2016
Embed
What would you like to do?
Masked image animation
<div class="🍕">
<div class="🍗">Hover me</div>
<div class="🍜">
<div class="color-overlay"></div>
<div class="white-overlay"></div>
<div class="img-wrapper">
<img src="http://www.journaldugeek.com/wp-content/blogs.dir/1/files/2015/09/chewie-comic.jpeg">
</div>
</div>
</div>
// Tried to remake the animation as seen in the menu ludmillamaury.com (dev by the one and only twitter.com/manuelodelain)
var $hoverMe = $('.🍗');
var $colorOverlay = $('.color-overlay');
var $whiteOverlay = $('.white-overlay');
var isAnimated = false;
$hoverMe.on('mouseenter', showImage);
$hoverMe.on('mouseleave', hideImage);
function showImage() {
if (isAnimated) {
TweenMax.killAll();
$whiteOverlay[0].style.transformOrigin = "left 50% 0px";
isAnimated = false;
} else {
isAnimated = true;
}
TweenMax.to($whiteOverlay, 1,
{scaleX: 0, ease:Quart.easeInOut}
);
TweenMax.fromTo($colorOverlay, 1,
{scaleX: 1},
{scaleX: 0, ease:Quart.easeInOut, delay: 0.2, onComplete: function() {
$whiteOverlay[0].style.transformOrigin = "left 50% 0px";
isAnimated = false;
}}
);
}
function hideImage() {
if (isAnimated) {
TweenMax.killAll();
isAnimated = false;
$whiteOverlay[0].style.transformOrigin = "right";
} else {
isAnimated = true;
}
TweenMax.to($whiteOverlay, 0.5, {
scaleX: 1,
ease:Quart.easeInOut,
onComplete: function() {
$whiteOverlay[0].style.transformOrigin = "right";
isAnimated = false;
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
html, body {
margin: 10px 0 0;
font-family: 'Catamaran', sans-serif;
overflow: hidden;
}
.🍕 {
position: relative;
text-align: center;
height: 100%;
}
.🍗 {
cursor: pointer;
display: inline-block;
position: absolute;
top: 50%;
left: 10%;
transform: translateY(-50%);
padding: 20px 15px 15px 20px;
font-size: 25px;
letter-spacing: 0.075em;
border: 2px solid #ffd208;
z-index: 4;
&:before {
content:'';
position: absolute;
width: 100%;
height: 100%;
bottom: -6px;
right: -6px;
border: 2px solid #9C08FF;
}
&:after {
content:'';
position: absolute;
top: 4px;
left: 4px;
right: 0;
bottom: 0;
background-color: #fff;
z-index: -1;
}
}
.🍜 {
position: relative;
display: inline-block;
img {
display: block;
width: 100%;
height: auto;
}
}
.color-overlay,
.white-overlay {
position: absolute;
z-index: 2;
transform-origin: right;
}
.color-overlay {
background-color: #05203e;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.white-overlay {
display: block;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
background-color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment