JQuery: How does Gowalla perform it's "slide" effect?

Question

How does Gowalla.com perform it's slide effect on the frontpage?

What JQuery effect can mimic that functionality of the sliding down effect?

Answer 1

The aptly named slideDown().

Answer 2

In jQuery, you can just use slideDown to do something similar, however Gowalla seems to use a slightly different method:

The individual panels are inside a parent panel which periodically changes it position. That is, the panels themselves aren't animating, and nothing is even changing size: it's just moving all the panels through a viewport. When it reaches the bottom, the Gowalla page just stops - it actually loads up enough panels for about 4 minutes of sliding - though in your case, you might want to take panels off the bottom and push them back in the top to make it continuous.

Answer 3

I think what they are doing is similar to what nickf mentioned. To create the animation effect, I think all that's done is to animate the position of the div container that wraps around the panels within.

So the parent panel will have a viewport that fits only 6 panels. Another div container will wrap around all the panels. Use jQuery .animate() to shift the div's top position attribute. Each iteration will shift the div container down by a panel's height (e.g. 100px).

var numPanels = 20;
var i = 1;

var livePanel = setInterval(function() {
  if (i < numPanels) {
    $('div.wrap').animate({'top': '+100px'}, 500, 'swing');
    i++;
  } else {
    livePanel.clearInterval();
  }
}, 1000);

That's just a rough code of how I think it could work. You also need to take into account the number of panels that will be in the viewport at any one time, and subtract that from the total number of "shifts down" you'll want, in numPanels.