Dynamic-CSS Example 8 - Vertical and Horzintal Animation With Grid Function

warning : this post is based on previous posts be sure you read them.

In previous Post we have created an awesome grid animation. In this post we will create a another grid animation which affect rows as a unit or cols as a unit.

In this example all row cells will have the same grid index so, they will be animated synchronusly.

ideacenter point affect cells in both directions vertical and horizontal.

to disable animation gradient in one direction just pass null instead of 0.0-1.0 value.

dcss.grid(i,c,5,0,null);

all elements in the same column will have the same index and hence the same delay.

Code
-----------------------------------------------------------
$('#container').children().filter('div').dcss(
        //css properties to be processed and applied to object
    {
        pointerEvents:'none',
        borderRadius:'100px',
        transform : 'translate(0%,0%)  scale(.5,.5)',
        opacity   : '0',
        transition : 'all 1s <time>s ease-in'
    },
    {
        //values to be applied to property values
        time : function(i,el,c){ 
            var ii = dcss.grid(i,c,5,0,null);
            return  ii * .1;
        } 
    }

);
-----------------------------------------------------------

Result :