Dynamic-CSS Example 9 - Invert Grid Selection

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

As grid selects elements near center point first so if we set center to  0.5,0.5 , first element will be the centeral element and it will always start animation before others. Setting "invert" param to true will select the farest element first then the nearer till the centeral element to be last selected element.

Normal animation :

Code

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

    });
-----------------------------------------------------------

Inverted Grid Selection

Code

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

    });
-----------------------------------------------------------

Result :