Masked image animation

index.html

<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>

masked-image-animation.markdown

Masked image animation

Cool mask animation, as seen on http://ludmillamaury.com/. Shout out to @manuelodelain !

A Pen by Thomas Aufresne on CodePen.

License.

script.js

// 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;
        }
    });
}

scripts

<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>

style.less

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;
}