Easy Infinite Scroll Part 1

Here is a fun little technique to get your brains spinning. This simple scroll technique can be used to scroll any number of items in a continuous loop. Use the “toggle mask” button in the swf above to see how the end clips are being lobbed off and sent back to the beginning. In this video I’ll start by showing you exactly how it works and how dynamic we will make it in part 2. I’m also revealing for the first time my slow motion loop explorer so you won’t miss a beat.

Watch the Video

Use the Slow Motion Loop Explorer

I spend a good deal of time using the Slow Motion Loop Explorer. Its important to understand that the steps that are being animated in reset() are transparent to the end user. I’ve only animated them to help you visualize how the code runs. The only animation the end user sees is the tween that takes place in scrollIt(). Below is the Slow Motion Loop Explorer that you can walk through at your own pace. It isn’t bullet proof so please refrain from clicking really quickly on the “step thru” button;)

AS3 Code

import com.greensock.*;

var startX:Number=parent_mc.x;

function scrollIt() {
	TweenMax.to(parent_mc, .5, {x:"100", onComplete:reset});
}

function reset() {
	//move all clips over to the right
	for each (var mc in parent_mc) {
		mc.x+=100;
		if (mc.x==400) {
			//take the right-most one and set it back to the left
			trace("found end mc = " + mc.name);
			mc.x=0;
		}
	}
	//shift the parent so it looks like nothing moved
	parent_mc.x=startX;
	//scroll it again after 1 second
	TweenLite.delayedCall(1, scrollIt);
}

btn.addEventListener(MouseEvent.CLICK, toggleMask)

function toggleMask(e:Event = null):void{
	parent_mc.mask = (parent_mc.mask) ? null : mask_mc

}

toggleMask();
scrollIt();

Download CS4 Source Flas

Updated 3-30-11 to include the version you see on the site AND a backwards version

SNORKL_infiniteScroll-and-backwards.zip

Stay Tuned

Remember all that dynamic scroll goodness I discussed in the video is coming soon. Once you fully understand the mechanics of moving the elements around I’ll show you how to simply change the size of the mask and have it all work without messing with a bunch of funky numbers.
Here is Infinite Scroll Part 2

oh an while you’re here, perhaps you would enjoy a click on one of these shiny buttons below?