Tweet Carousel - a scrolling twitter feed animation (API 1.1)

19 August, 2013 by Tom Elliott

This is the second twitter feed animation I’ve created as part of my jQuery Twitter series for the new AP1 1.1. A carousel style scrolling twitter feed was one of the more frequently requested types of twitter animation.

View the Tweet Carousel demo here.

The carousel will load in the latest tweets, with the most recent at the top, scrolling through them based on a time interval. There are options to adjust how fast the tweets should slide, how many tweets to scroll by and how long the delay between the sliding.

Tweet Carousel has been tested for compatibility in all major browsers including Chrome, FireFox, IE 8, IE 9, IE 10, Safari and Opera

Step 1 – Authentication

If you’ve read any of my previous Twitter Feed tutorials, you’ll know by now that as we have to work with Twitter’s API 1.1, all endpoints need to be authenticated. The first thing you should do is head over to my Twitter authentication guide to get your twitter user timeline (or search stream) authenticated and tweets list output as JSON format.

This solution is PHP based but alternatives are available if you prefer to work in a different server side language.

Step 2 – The Twitter Carousel

Got your tweets output in raw JSON format? Great. The easiest thing next would be to grab all the JavaScript, CSS and HTML from the Tweet Carousel demo, replacing the PHP file in the $.getJSON request with the script you created in step 1. If you get an error, there’s plenty of troubleshooting tips (along with more info) over at the static feed tutorial.

If you are already using the static twitter feed and want to upgrade to this one, it would probably be best to use the new JS and CSS as a number of changes have been made and then apply any specific styles.

Tweet Carousel Breakdown

Let’s run through some of the variables and the main function that controls how the Tweet Carousel operates. At the beginning of the JavaScript there are a load of parameters – generic feed parameters (which we’ve used on the static feed) and some carousel specific variables as below:

1. The feedheight variable sets the height of the Tweet Carousel. The Carousel needs to have a fixed height because if it kept adjusting to fit the containing tweets of different heights, it would look odd and affect any HTML elements sitting below the Carousel.
2. pausetime sets the delay between the sliding of tweets in milliseconds. It’s good to set this quite high to give people a chance to read the tweets.
3. slidetime determines how long it takes to slide the tweets into the next position. This defaults to 2 seconds which seems to be a good length when scrolling 3 tweets.
4. tweetshift determines how many tweets to scroll by after the pausetime delay. tweetshift should be a factor of the totaltweets, i.e. totaltweets divided by tweetshift should give a whole number. If your scrolling 2 tweets at a time, the totaltweets should be an even number for example.
5. The boolean slideinitial will determine if the tweets should initially appear instantly or scroll into view.

The main carousel function is below:

function tweetcarousel() {
  var currenttweet = 1;
  var lasttweet = totaltweets;
  var tweetheight = new Array();
  var totalheight  = 0;
  var sliderheight = feedheight;

  for (var i=1; i<=totaltweets; i++) {
	  tweetheight[i] = parseInt($('#t'+i).css('height')) + parseInt($('#t'+i).css('padding-top')) + parseInt($('#t'+i).css('padding-bottom'));
	  if (slideinitial == false) {
		  sliderheight = 0;
	  }
	  if (i > 1) {

		  $('#t'+i).css('top', tweetheight[i-1] + totalheight + sliderheight);
		  $('#t'+i).animate({'top':tweetheight[i-1]+ totalheight}, slidetime);
		  totalheight += tweetheight[i-1];
	  } else {
		  $('#t'+i).css('top', sliderheight);
		  $('#t'+i).animate({'top':0}, slidetime);
	  }
  }
  totalheight += tweetheight[totaltweets];

  setInterval(scrolltweets, pausetime);

  function scrolltweets() {
	  var currentheight = 0;
	  //totalheight = 0;
	  for (var i=0; i<tweetshift; i++) {
		  var nexttweet = currenttweet+i;
		  if (nexttweet > totaltweets) {
			  nexttweet -= totaltweets;
		  }
		  console.log(nexttweet + " "+ currenttweet);
		  currentheight += tweetheight[nexttweet];
	  }

	  for (var i=1; i<=totaltweets; i++) {
		  $('#t'+i).animate({'top': (parseInt($('#t'+i).css('top'))-currentheight) }, slidetime, function(){

			  var animatedid = parseInt($(this).attr('id').substr(1,2));

			  if (animatedid==totaltweets) {
				  for (j=1; j<=totaltweets; j++) {
					  if (parseInt($('#t'+j).css('top')) < -50) {
						  var toppos = parseInt($('#t'+lasttweet).css('top')) + tweetheight[lasttweet];
						  $('#t'+j).css('top', toppos);
						  lasttweet = j;

						  if (currenttweet >= totaltweets) {
							  var newcurrent = currenttweet - totaltweets + 1;
							  currenttweet = newcurrent;
						  } else {
							  currenttweet++;
						  };
					  }
				  }								

			  }
		  });
	  }
   }
}
tweetcarousel();

In a nutshell, the function will first loop through the total number of tweets, recording the different heights of each tweet in an array and setting the total height of the combined tweets before animating them into view.

A timer is set to scroll the tweets based on the delay interval. This will then loop through and scroll all tweets at once and if any of the tweets have scrolled above the top of the feed container (CSS set to overflow:hidden), then the top position of that tweet is set to the position of the last tweet in the feed list.

If you want to turn on the tweet intents (for reply, retweet and favorite), you can do so by setting showtweetactions to true. This is disabled by default however since people are less likely to want to interact with the Carousel if the tweets within are moving.

There are still a few features I want to add to this. For example having the twitter feed checking for new tweets and refreshing the list automatically.

---

---

Related posts

Creating a Twitter Search & Analytics tool »

---