Framework Design Libray

This is a collection of items that are in the framework that you may want to use on the site.

Also See

#1 Animations

bounceIn

<h2 class='animated bounceIn'>It Works!</h2>

bounceInDown

<h2 class='animated bounceInDown'>It Works!</h2>

bounceInRight

<h2 class='animated bounceInRight'>It Works!</h2>

bounceInUp

<h2 class='animated bounceInUp'>It Works!</h2>

bounceInLeft

<h2 class='animated bounceInLeft'>It Works!</h2>

fadeInDownShort

<h2 class='animated fadeInDownShort'>It Works!</h2>

fadeInUpShort

<h2 class='animated fadeInUpShort'>It Works!</h2>

fadeInLeftShort

<h2 class='animated fadeInLeftShort'>It Works!</h2>

fadeInRightShort

<h2 class='animated fadeInRightShort'>It Works!</h2>

fadeInDown

<h2 class='animated fadeInDown'>It Works!</h2>

fadeInUp

<h2 class='animated fadeInUp'>It Works!</h2>

fadeInLeft

<h2 class='animated fadeInLeft'>It Works!</h2>

fadeInRight

<h2 class='animated fadeInRight'>It Works!</h2>

fadeIn

<h2 class='animated fadeIn'>It Works!</h2>

growIn

<h2 class='animated growIn'>It Works!</h2>

shake

<h2 class='animated shake'>It Works!</h2>

shakeUp

<h2 class='animated shakeUp'>It Works!</h2>

rotateIn

<h2 class='animated rotateIn'>It Works!</h2>

rotateInUpLeft

<h2 class='animated rotateInUpLeft'>It Works!</h2>

rotateInDownLeft

<h2 class='animated rotateInDownLeft'>It Works!</h2>

rotateInUpRight

<h2 class='animated rotateInUpRight'>It Works!</h2>

rotateInDownRight

<h2 class='animated rotateInDownRight'>It Works!</h2>

rollIn

<h2 class='animated rollIn'>It Works!</h2>

wiggle

<h2 class='animated wiggle'>It Works!</h2>

swing

<h2 class='animated swing'>It Works!</h2>

tada

<h2 class='animated tada'>It Works!</h2>

wobble

<h2 class='animated wobble'>It Works!</h2>

pulse

<h2 class='animated pulse'>It Works!</h2>

lightSpeedInRight

<h2 class='animated lightSpeedInRight'>It Works!</h2>

lightSpeedInLeft

<h2 class='animated lightSpeedInLeft'>It Works!</h2>

flip

<h2 class='animated flip'>It Works!</h2>

flipInX

<h2 class='animated flipInX'>It Works!</h2>

flipInY

<h2 class='animated flipInY'>It Works!</h2>

Extra Functions

Sequencing

If you want to have a set of animations start one after the other then you can set a sequence time in ms using "data-sequence" then define the order with "data-id".

<div class='animatedParent' data-sequence='500'>
	<h2 class='animated bounceInDown' data-id='1'>It Works!</h2>
	<h2 class='animated bounceInDown' data-id='2'>This animation will start 500ms after</h2>
	<h2 class='animated bounceInDown' data-id='3'>This animation will start 500ms after</h2>
</div>	

Offset

This will make the make the animation either start before or after it has entered the viewport by the specified ammount. So if you wanted to only start the animation after the user has scrolled 300px past it then setting an offset of -300px would achieve this.

<div class='animatedParent'data-appear-top-offset='-300'>
	<h2 class='animated bounceInDown'>It Works!</h2>
</div>	

Animate Once

Adding this will make sure the item only animates once and will not reset when it leaves the viewport.

<div class='animatedParent animateOnce'>
	<h2 class='animated bounceInDown'>It Works!</h2>
</div>	

Animation Speed

Currently you can define 4 speeds, the default which requires nothing then slow, slower and slowest.

<div class='animatedParent'>
	<h2 class='animated bounceInDown slowest'>It Works!</h2>
</div>	

Delay (New!)

You can now add individual delays to your animations if you don't want to do it with sequencing delays, please refer to the animations css file to see all the delays available.

<div class='animatedParent delay-250'>
	<h2 class='animated bounceInDown'>It Works!</h2>
</div>

On Click Toggle

You can now call the animations with an on click event. You can can define an out animation for transitioning out with this.

Please note that the target will only animate on view if you wrap it in an animatedParent class. If it is not in this then the animation will only trigger on click.

<input type='button' class='animatedClick' data-target='clickExample'>
<h2 class='animated bounceInDown clickExample fadeOutDown'>It Works!</h2>

On Click With Sequencing

You can now call the animations with an on click event. You can can define an out animation for transitioning out with this.

<input type='button' class='animatedClick' data-target='clickExample' data-sequence='500'>
<h2 class='animated bounceInDown clickExample fadeOutDown' data-id='1'>It Works!</h2>
<h2 class='animated bounceInDown clickExample fadeOutDown' data-id='2'>It Works!</h2>

IE Fix

This is just a fix that will fix the elements not appearing on IE9 or less, please not that the animations will not work on IE9 or less.

Place this below the animations.css link in the head of your file.

<!--[if lte IE 9]>
      <link href='/PATH/TO/FOLDER/css/animations-ie-fix.css' rel='stylesheet'>
<![endif]-->

#2 Available Icons


Category: BRAND

BLACK

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

WHITE

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

Category: CHART

BLACK

Icon
Icon
Icon

WHITE

Icon
Icon
Icon
Icon

Category: CURRENCY

BLACK

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

WHITE

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

Category: DIRECTIONAL

BLACK

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

WHITE

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

Category: FILE

BLACK

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

WHITE

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

Category: FORM

BLACK

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

WHITE

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

Category: GENDER

BLACK

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

WHITE

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

Category: MEDICAL

BLACK

Icon
Icon
Icon
Icon
Icon
Icon
Icon

WHITE

Icon
Icon
Icon
Icon
Icon
Icon
Icon

Category: PAYMENT

BLACK

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

WHITE

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

Category: SPINNER

BLACK

Icon
Icon
Icon
Icon

WHITE

Icon
Icon
Icon
Icon

Category: TEXT-EDITOR

BLACK

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

WHITE

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

Category: TRANSPORTATION

BLACK

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

WHITE

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

Category: VIDEO

BLACK

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

WHITE

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

Category: WEB

BLACK

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon

WHITE

Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon
Icon