Question

I’m currently trying to use Quicksand, a jquery plugin that allows you to animate elements on the page by hiding and showing certain elements based on tags. I have that working just fine. My problem is that as the elements are easing, they enlarge while they’re moving. Once they settle in their places, they shrink to the proper size, but it looks awfully strange and I’d like to work out why this is happening in the first place.

Here is the main.js file that has my preferences for quicksand:

$(document).ready(function() {

  // get the action filter option item on page load
  var $filterType = $('#filterOptions li.active a').attr('class');

  // get and assign the ourHolder element to the
    // $holder varible for use later
  var $holder = $('ul.ourHolder');

  // clone all items within the pre-assigned $holder element
  var $data = $holder.clone();

  // attempt to call Quicksand when a filter option
    // item is clicked
    $('#filterOptions li a').click(function(e) {
        // reset the active class on all the buttons
        $('#filterOptions li').removeClass('active');

        // assign the class of the clicked filter option
        // element to our $filterType variable
        var $filterType = $(this).attr('class');
        $(this).parent().addClass('active');

        if ($filterType == 'all') {
            // assign all li items to the $filteredData var when
            // the 'All' filter option is clicked
            var $filteredData = $data.find('li');
        } 
        else {
            // find all li elements that have our required $filterType
            // values for the data-type element
            var $filteredData = $data.find('li[data-type~=' + $filterType + ']');
        }

        // call quicksand and assign transition parameters
        $holder.quicksand($filteredData, {
            duration: 800,
            easing: 'easeInOutQuad'
        });
        return false;
    });
});

The Quicksand file itself has remained the same, with the except that I changed all ‘height’s within the document to ‘width’, as I don’t have heights specified for any of the divs.

Thank you for your help! Please let me know if you need to see the HTML or CSS to solve the problem.

Answer 1

This is happening because of the easing function you’ve used: easeInOutQuad.

It gives the animation an invese bounce aspect.

See here for reference: http://gsgd.co.uk/sandbox/jquery/easing/

Edit:

You have found your problem since start. I’ve debuged your page and found that the percentage measures are the problem.

From the site: http://razorjack.net/quicksand/docs-and-demos.html

CSS recommendations
1.When styling your items and their container, please use CSS class. Using ID may lead to strange results. Quicksand clones the container to simulate destination frame of the animation. Since it’s impossible for two elements of the same ID to exist, styling your items/container via container ID should be avoided.
2.Quicksand needs to know the margin of body, container and collection items. If these elements have their margins, please use px (pixels), not ems. The plugin doesn’t understand ems for now.

I think percentages are included in this same case.