Below you can find some examples that show you the basic usage of Pieces Plugin.

A simple example

On document ready Pieces waits for 2 seconds and then performs the IN animation (with fade-in effect) called "pieces1".

Animations parameters

This example shows some paramaters we can use. Try clicking on the image.


Pieces is responsive. Try clicking the below image and try to resize your browser (this animation is very slow to allow you to resize the window).

Starting an animation when the image become visible

This example performs an IN animation when the image become visible after scrolling the page. threshold:400 means that at least 400px have to be visible to start the animation.

Mouse Over

Pieces can also start an animation on mouse over, out and click. The following example performs an animation on mouse over.


In this example Pieces will perform the animation inside a masked box.

click on the above image and see the callbacks in action


There are two callbacks that Pieces can call:
onStart: before the animation starts
onComplete: when the animations has completed


You can also use Pieces with html, simply adding some attributes to your <img> tag. Here is an example.

Are you looking for the Wordpress Plugin?

Pieces is also available for Wordpress. Check it out