How to Smooth out an Animation for jQuery Filter System

Question

So I've been working on a filter system that allows me to display data from the Flickr API using phpFlickr as a library in CodeIgniter. I currently have it working well and is completely functional though the animation isn't where I want to have it. The issue that I'm having is when I switch the content to a different set of images it jerks into place and doesn't have a smooth animation. I'm not sure what the best method is to approach this animation as I'm pretty new to animating. Additionally if there are ways that I can clean up the code that would be great. Here's the code that I have.

Controller

    $sets = $this->phpflickr->photosets_getList('66096679@N07');
    $recent = $this->phpflickr->photos_search(array('privacy_filter' => 5, 'user_id' => '66096679@N07'));

    foreach ($sets['photoset'] as $key => $value) {
        $setid = $value['id'];
        $photos_in_set = $this->phpflickr->photosets_getPhotos($setid, 'original_format', NULL);

        $set_array[$key] = str_replace(' ', '-', $value['title']);

        foreach ($photos_in_set['photoset']['photo'] as $key2 => $value2) {
            $photo_array[$key][$key2]['set'] = str_replace(' ', '-', $value['title']);
            $photo_array[$key][$key2]['title'] = $value2['title'];
            $photo_array[$key][$key2]['photo_url_thumb'] = $this->phpflickr->buildPhotoURL($value2, "large");
            $photo_array[$key][$key2]['photo_url_large'] = $this->phpflickr->buildPhotoURL($value2, "original");
        }

    }

    $data['photos'] = array_reverse($photo_array);
    $data['sets'] = $set_array;

View

<div id="filter">
    <a href="#" data-id="show-all" onclick="return false">All</a>
    <?php foreach($sets as $key => $value): ?>
        <a href="#" data-id="<?= $value ?>" onclick="return false"><?= str_replace('-', ' ', $value) ?></a>
    <?php endforeach; ?>
</div>
<section id="photos">
    <?php foreach($photos as $photoset): ?>
        <?php foreach($photoset as $key): ?>
            <a class="fancybox-media" href="<?= str_replace('http:', '',$key['photo_url_large']) ?>" data-filter="<?= $key['set'] ?>">
                <img src="<?= str_replace('http:', '', $key['photo_url_thumb']) ?>" />
            </a>
        <?php endforeach; ?>
    <?php endforeach; ?>
</section>

Javascript

$(document).ready(function(){

    $( '#filter a' ).click(function() {
      var set = $(this).data('id');

      $("#photos a[data-filter='"+ set +"']").fadeIn('20');
      $("#photos a[data-filter!='"+ set +"']").fadeOut('0');

      if($(this).data('id') === 'show-all') {
        $('#photos a'). fadeIn('20');
      }
    });
});

Here is a link to a live example of the above code. If you can help me smooth out the animation that would be very much appreciated. In terms of how the data is setup, it seems like this is the best method because all of the images are listed as private so that they are only available on the website. Any help or direction is much appreciated, just at a stand still on this. If you have any questions about it then I'd be more than happy to update my question accordingly. Thanks a lot for the help in advance!

Even though the images are originally loaded on the first page load? The a tags don't actually link off anywhere so the page isn't refreshed. The `onclick="return false"` takes care of that. The javascript just makes it fade in and fade out, which is smooth. The problem is when it shifts left it's not smooth at all and I'm not sure the appropriate steps to take. **EDIT:** also the images are all hosted off site using the flickr api. — Elias Ranz, Mar 15 '14 at 00:44
I'm trying to get an animation similar to quicksand when you click on applications. The element will smoothly transition to the left instead of jerk to the left. Right now mine is jerking to the left. The element that shifts to the left I think is the first element in the array with that category. Just not sure how to get the animation when you click through to a different category smooth. http://razorjack.net/quicksand/ I also tried `fadeTo()` and that didn't seem to help at all. — Elias Ranz, Mar 15 '14 at 01:11

score 0 · Accepted Answer · edited May 23 '17 at 12:21

Figured out the smoother image animation code below

Javascript

    $( '#filter a' ).click(function() {
       var set = $(this).data('id');

       $("#photos a[data-filter='"+ set +"']").addClass('in');
       $("#photos a[data-filter='"+ set +"']").removeClass('out hidden');
       $("#photos a[data-filter!='"+ set +"']").addClass('out hidden');
       $("#photos a[data-filter!='"+ set +"']").removeClass('in');

      if($(this).data('id') === 'show-all') {
         $("#photos a[data-filter='"+ set +"']").addClass('out hidden');
         $('#photos a').addClass('in');
         $('#photos a').removeClass('hidden out');
      }
      $('#photos a').animate({
        'left': '0',
        'top':' 0'
      });
  });

CSS

@-webkit-keyframes fadein {
   from { opacity: 0; }
   to { opacity: 1; }
}

@-webkit-keyframes fadeout {
   from { opacity: 1; }
   to { opacity: 0; }
}
.in, .out {
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 705ms;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-duration: 705ms;        
}

.fade.out {
    z-index: 0;
    -webkit-animation-name: fadeout;
    -moz-animation-name: fadeout;
    opacity:0;
}

.fade.in {
    opacity: 1;
    z-index: 10;
    -webkit-animation-name: fadein;
    -moz-animation-name: fadein;
}

The CSS is courtesy of this stackoverflow post. Now to figure out how to preload some of the images.

How to Smooth out an Animation for jQuery Filter System

1 Answers1