[SOLVED] expand div with easing bounce animation

expand div with easing bounce animation

I hide the div element to expand another div area. I just want to replace 'transition: width .3s ease-out; 'with' easeoutbounce 'with jquery, here is my fiddle. what should I add / change from the following code?

(function() {
var page = document.body,
    btn = document.getElementById('expmain');
btn.onclick = function() {
    page.className = (/(^| )main-visible( |$)/.test(page.className)) ?
        page.className.replace(/main-visible/,"") :
            page.className + " main-visible";
    // Toggle the toggle navigation title too...
    this.title = (this.title == "expand!") ?
        "back!" :
            "expand!";

    return false;
};
})();

Solution

here is the easeOutBounce animation with your code. I kept the animations triggered by "back" and "expand" separate so you could make them have separate animations in the future.

(function() {
	var page = document.body,
		btn = document.getElementById('expmain');
	btn.onclick = function() {
		page.className = (/(^| )main-visible( |$)/.test(page.className)) ?
			page.className.replace(/main-visible/,"") :
				page.className + " main-visible";
        
		// Toggle the toggle navigation title too...
		this.title = (this.title == "expand!") ?
			"back!" :
				"expand!";

		return false;

	};
  
  //the animation for when you click 'expand'
  $(".open").on("click", function(){
  	$(".left-sec").animate({width:"100%"},300, 'easeOutBounce');
  });
  //the animation for when you click 'back'
  $(".close").on("click", function(){
  	$(".left-sec").animate({width:"83%"},300, 'easeOutBounce');
  });

})();

a{color: #fff}
.left-sec {
		background: blue;
    float: right;
    overflow: hidden;
    /*transition: width 0.3s ease-out 0s;*/
    width: 83%;
    height: 120px;
}

#navigasi {display: block; background: black}

#time {
	  height: 120px;
		background: yellow;
    float: left;
    overflow: hidden;
    padding: 2%;
    width: 13%;
}
#post {
    line-height: 120px;
    text-align: center;
}
.close {display: none}
.main-visible .open{display: none}
.main-visible .close{display: inline}
/*.main-visible .left-sec{width: 100%;}*/
.main-visible #time{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3.2/jquery.easing.js"></script>
<div class="left-sec">
  <div id="navigasi">
    <a id="expmain" title="expand!" href=".left-sec">
     <span class="open">expand</span>
     <span class="close">back</span>
    </a>
  </div>
<div id="post">1234567</div>
</div>

<div id="time"/>