Animations


We created animations can use to all elements your website. You can choose one of many different type of animations and also change position of elements appearance or order of them. If you want to set order of appearance, add data-animation-delay in markup to each next element more animation delay. For example the first element appears after 0.2s (data-animation-delay="200") and second element appears after 0.4s (data-animation-delay="400") from the begining of animation.

Below we present all classes of animations which you can use.

Model of animation yo-anim-(type of animation)-(direction)

type of animation
fade, zoyo, pop, flip
direction of animation
rt (to right), lt (to left), rtl (from right to left), ltr (from left to right), ttb (from top to bottom), btt (from bottom to top), x (horizontal), y (vertical), out (from in to out), in (from out to in)

Examples

yo-anim-fade-ltr
element fades from left to right (optional direction: "rtl", "btt", "ttb")
yo-anim-zoyo-in
element zooms from out to in (optional direction: "out")
yo-anim-pop-out
element pops from in to out
yo-anim-spin-lt
element spins to left (optional direction: "rt")
yo-anim-flip-x
element flips horizontal (optional direction: "y")
...
<div class="col-md-7 col-sm-8 slide-content">
  <header class="yo-anim yo-anim-fade" data-animation-delay="200">
	<h2>We build awesome App!</h2>
  </header>
  <div class="slide-text clearfix">
	<p class="yo-anim yo-anim-fade" data-animation-delay="400">Pellentesque facilisis ante gravida felis iaculis, ut accumsan tellus bibendum. Phasellus consectetur sapien et massa auctor, non molestie dolor congue. Cras ligula orci, scelerisque faucibus ante ac, dapibus cursus nibh.</p> 
  <div class="app-buttons yo-anim yo-anim-fade" data-animation-delay="1200">
	<a href="#">
	  <figure class="icon-app">
		  <img src="img/app-btn1.png"/>
		  <img src="img/app-btn1dark.png" class="dark-img hidden-xs"/>
		</figure>
		<span class="btn-text">App store</span>
	  </a>
	  <a href="#">
		<figure>
		  <img src="img/app-btn2.png"/>
		  <img src="img/app-btn2dark.png" class="dark-img hidden-xs"/>
		</figure>
		<span>Google Play</span>
	  </a>
	</div>
  </div>
</div>
<div class="col-md-5 col-sm-4">
  <figure class="hidden-xs yo-anim yo-anim-fade" data-animation-delay="800"><img src="img/phone1.png" alt=""></figure>
</div>
...