JSFiddle - React, Tailwind, and code Playground

by digthedoug

HTML

<script src="http://beta.palisadesinteractive.com/workspace/js/libs/plugins/CSSPlugin.min.js"></script>
<script src="http://beta.palisadesinteractive.com/workspace/js/libs/easing/EasePack.min.js"></script>
<script src="http://beta.palisadesinteractive.com/workspace/js/libs/TweenLite.min.js"></script>
<div id="container">
    <div id="projects-container">
        <div class="innertube">
            <div class="project">
                <div class="thumb">
                    <img src="http://placehold.it/240x135">
                </div>
                <div class="innertext">
                    <div class="title">
                        <h2>
                            Moonrise Kingdom
                        </h2>
                    </div>
                    <div class="client">
                        <p>
                            Focus Features
                        </p>
                    </div>
                    <div class="tags"></div>
                </div>
            </div>
            <div class="project"  >
                <div class="thumb">
                    <img src="http://placehold.it/240x135">
                </div>
                <div class="innertext">
                    <div class="title">
                        <h2>
                            Behr Paint &amp; Primer
                        </h2>
                    </div>
                    <div class="client">
                        <p>
                            Behr
                        </p>
                    </div>
                    <div class="tags"></div>
                </div>
            </div>
            <div class="project">
                <div class="thumb">
                    <img src="http://placehold.it/240x135">
                </div>
                <div class="innertext">
                    <div class="title">
                        <h2>
                            Jane Eyre
                        </h2>
                    </div>
              ...

CSS

@-webkit-keyframes contract{
   to   { left: 300px; opacity: .5;}
}

.animate-contract{
 -webkit-animation: contract .5s ease forwards;  
}

#container{
    width: 100%;
    float: left;
}

#projects-container{
    float: left;
    position: absolute;
    top: 50px;
    overflow: scroll;
    height: 100%;
    left: 0px;
    width: auto;
}

#projects-container .innertube{
    padding-bottom: 100px;
}

.innertube{
    padding: 0 20px 20px;
}

.clearfix{
    clear: both;
}

.project{
    width: 240px;
    float: left;
    opacity: 0.5;
    margin-right: 20px;
    margin-bottom: 20px;
    background-color: #ffffff;
    cursor: pointer;
}

.project .innertext{
    padding-top: 10px;
    padding-right: 15px;
    padding-left: 15px;
}

.project .title h2{
    font-size: 16px;
    margin: 0;
    text-align: center;
}

.project .client p{
    margin: 0;
    font-size: 11px;
    color: #666;
    text-align: center;
}

JavaScript

$(document).ready(function() {
    
    var contracted = false;
   
    $('.project').on('click', projectClick);
    
    $('.project').on('mouseenter', projectEnter);
    $('.project').on('mouseleave', projectLeave);
    
    $('#projects-container').on('mouseenter', projectsContainerEnter);
    $('#projects-container').on('mouseleave', projectsContainerLeave);
  
    function completeAnimate(){
        $('.project').trigger('mouseleave');
    }

    function contract(){
     
        // PROJECTS CONTRACT RIGHT
        TweenLite.to($('#projects-container'), .5, {css:{left:"300px", opacity:".5"}, ease:Expo.easeInOut, onComplete: completeAnimate});

       //$('#projects-container').css('left','300px');             //No animation, works fine, no issues
       //$('#projects-container').animate({'left':'300px'});       //Same as the tween, requires mouseleave trigger
       //$('#projects-container').addClass('animate-contract');     //Same as above
    }

    function expand(){
    
        // PROJECTS EXPAND LEFT
        TweenLite.to($('#projects-container'), .5, {css:{left:"0px", opacity:"1"}, ease:Expo.easeInOut, onComplete: completeAnimate});
    }

    function projectClick(e){

        e.preventDefault()
        if (contracted){expand();}else{contract(); }
        contracted = !contracted;
    }

    function projectEnter(e){
        TweenLite.to($(this), .125, {css:{opacity:"1"}, ease:Linear.easeInOut});
    }

    function projectLeave(e){
        TweenLite.to($(this), .125, {css:{opacity:".5"}, ease:Linear.easeInOut});
    }

    function projectsContainerEnter(e){
        TweenLite.to($(this), .125, {css:{opacity:"1"}, ease:Linear.easeInOut});
    }

    function projectsContainerLeave(e){
        TweenLite.to($(this), .125, {css:{opacity:".5"}, ease:Linear.easeInOut});
    }
        
});