Create Smooth Slide-in Animations Using JQuery Plugin

Slidein is a component that uses CSS and JQUERY Animation to transfer the elements smoothly in the width, at a certain speed, and from any place.

jquery animation plugins, animate slider jquery, jquery plugin examples, jquery animation effects for websites, vertical slider jquery plugin, best jquery plugin for animation

How to make use of it:

1. Download and include the additional component JQUERY SLIDEIN after the JQUERY JAVASCRIPT library.

<script src="jquery-1.11.3.min.js"></script>
<script src="js/jquery.slideIn.js"></script>

2. Make sure to hide the element you want to slip.

#element {
  display: none;  
  ...
}

3. The plugin provides methods to slip into elements from the left/right/down/up.

$('#element').slideInLeft({

// animation speed
speed : 400,

// how far away the animation begins
distance : '100px',

// start opacity level
startOpacity : '0',

// opacity speed
opacitySpeed : 400,

});

$('#element').slideInRight({

speed : 400,
distance : '100px',
startOpacity : '0',
opacitySpeed : 400,

});

$('#element').slideInDown({

speed : 400,
distance : '100px',
startOpacity : '0',
opacitySpeed : 400,

//  Tells the animation to come from the top
comeDown: true,

// Tells the animation to come from the bottom.
comeUp: null,

});

$('#element').slideInUp({

speed : 400,
distance : '100px',
startOpacity : '0',
opacitySpeed : 400,
comeDown: null,
comeUp: true,

});

$('#element').slideInDiagonal({

speed : 400,
distance : '100px',
startOpacity : '0',
opacitySpeed : 400,

// left position
left : true,

// right position
right : null,

comeDown: null,
comeUp: null,

});

jquery plugin for element slide-in animation, SlideIn Plugin/Github, animate on scroll jquery plugin, jquery slide div on scroll