the view port animations is fireing animation when the element is in the viewport.
to apply viewport animation simply add Class wow then add the animation class/name
scroll down to see the effects in action.
Tip : to applay animation after another use a data attribute delay data-delay with a value of
seconds or millisecondes number for example data-delay="1s".
<div class="section">
<div class="row">
<div class="col-s-12 col-m-6 col-l-3">
<img src="images/image.jpg" alt="" class="fluid wow fadeInLeft">
</div>
<div class="col-s-12 col-m-6 col-l-3">
<img src="images/image-2.jpg" alt="" class="fluid wow fadeInRight" data-delay="0.5s">
</div>
<div class="col-s-12 col-m-6 col-l-3">
<img src="images/image-3.jpg" alt="" class="fluid wow vanishIn" data-delay="1s">
</div>
<div class="col-s-12 col-m-6 col-l-3">
<img src="images/image.jpg" alt="" class="fluid wow holeIn" data-delay="1.5s">
</div>
</div>
</div>
Note : the animatons have A seperated file you will find it in the dist folder or you can use the CDN call back from Getting Start Page.
| Helper | Definition |
| data-delay / data-wow-delay | for delaying animation. |
| data-wow-duration | animation duration |
| data-wow-offset | element offest |
| data-wow-iteration | animation iteration number |
Note : all 3rd party plugins ar already included with the lateast version and customized to work perfectly with tornado.
You can see the original documentation in order to use them in particular way.
| Plugin Name | Definition | Orignal Documentation |
| Wow.js | Reveal CSS animation as you scroll down. [for Commercial use visit wow commercial] | Documentation |