JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<div id="events_partial" class="container body-content col-md-12 col-lg-12 set-max-height">
	<div class="row sec-container" id="secContainer">
		<div id="secDetails">
			<div class="container">
                <p><h3><strong> Program in Place 1 &nbsp;on&nbsp;11/22/2015</strong></h3></p><p>Program Description which is a very long text on document and it can be more than 2 lines</p>
			</div>
			<div class="container">
				<h3><strong> Program in Place 2 &nbsp;on&nbsp;11/22/2015</strong></h3><p>Program Description which is a very long text on document and it can be more than 2 lines</p>
			</div>
			<div class="container">
				<h3><strong> Program in Place 3 &nbsp;on&nbsp;11/22/2015</strong></h3><p>Program Description which is a very long text on document and it can be more than 2 lines</p>
			</div>
			<div class="container">
				<h3><strong> Program in Place 4 &nbsp;on&nbsp;11/22/2015</strong></h3><p>Program Description which is a very long text on document and it can be more than 2 lines</p>
			</div>
			<div class="container">
				<h3><strong> Program in Place 5 &nbsp;on&nbsp;11/22/2015</strong></h3><p>Program Description which is a very long text on document and it can be more than 2 lines</p>
			</div>
			<div class="container">
				<h3><strong> Program in Place 6 &nbsp;on&nbsp;11/22/2015</strong></h3><p>Program Description which is a very long text on document and it can be more than 2 lines</p>
			</div>
			<div class="container">
				<h3><strong> Program in Place 7 &nbsp;on&nbsp;11/22/2015</strong></h3><p>Program Description which is a very long text on document and it can be more than 2 lines</p>
			</div>
			<div class="container">
				<h3><strong> Program in Place 8 &nbsp;on&nbsp;11/22/2015</strong></h3><p>Program Description which is a very long text on document and it can be more than 2 lines</p>
			</div>
		</div>
	</div>
</div>

CSS

#events_partial {
	min-height: 385px !important;
	margin-top: 57px;
	overflow: hidden;
}
.set-max-height {
	max-height: 385px !important;
	padding-top: 30px !important;
}
.sec-container {
	overflow: hidden !important;
	min-height: 200px;
}

JavaScript

// [http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/]
window.requestAnimFrame=(function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/60);};})();
var secDetails=$('#secDetails');
var container=secDetails.find('.container');
var eventsPartial=$('#events_partial');
var currTop=0;
var destTop=eventsPartial.height()-secDetails.height()-parseInt(eventsPartial.css('margin-top'));
var isPaused=false;
var isGoingDown=true;
var speed=2;
if(container.length>=4&&container.length<9){
	requestAnimFrame(render);
	secDetails.hover(function(){isPaused=true;},function(){isPaused=false;});
	currTop=destTop;
}
function render(){
	requestAnimFrame(render);
	if(!isPaused){
		secDetails.css({transform:'translate3d(1px,'+roundDecimal(currTop,2)+'px,0px)'});
		currTop+=!isGoingDown?-speed:speed;
		if(currTop>=0) isGoingDown=false;
		if(currTop<=destTop) isGoingDown=true;
	}
}
function roundDecimal(value,place){ return Math.round(value*Math.pow(10,place))/Math.pow(10,place); }