packery transition on initial load

Question

I am using packery and it seems good - what I am really trying to do is have a transition on load.

When I add (append) items using the in built functionality it has a nice transition but I am trying to get that on the first lot of tiles on load without having to add these items.

this is the code I run

function runPackery() {

      $container = $('#main').packery({
        itemSelector: '.module',
        columnWidth: 320,
        //disable resize
        isResizeBound: false,
        transitionDuration:"0.8s"
      });

      var pckry = $container.data('packery');

      var gutter = pckry.options.gutter || 0;
      var columnWidth = pckry.options.columnWidth + gutter;

      function onResize() {
        var outsideSize = getSize( $container.parent()[0] ).innerWidth;
        var cols = Math.floor( outsideSize / ( columnWidth ) );
        // set container width to columns
        $container.width( cols * columnWidth - gutter )
        // manually trigger layout
        $container.packery();
      }

      // debounce resize event
      var resizeTimeout;
      $( window ).on( 'resize', function() {
        if ( resizeTimeout ) {
          clearTimeout( resizeTimeout );
        }
        resizeTimeout = setTimeout( onResize, 100 );
      })

      // initial trigger 
      onResize();   
}

And that code is run on the document ready with jQuery.

I do not see any options within the documentation to enable this - i thought it would be an option

can anyone help?

cheers

Answer 1

best way is to init packery and then just add the first items afterwards - works well