Search the Community

Hello GreenSock community! I have a question for you. I've been working on a image scroller of some images, and got this working how'd I'd like. However my client has now requested an infinite scrolling gallery. I've done some research and found a script that seems to have the potential to do what I want to do, however it would need some modifications to behave as the client has requested. So right now this script auto scrolls a row of images, adding the appropriate image on to the end of the row with each scroll. I'd like to modify this to have it not auto scroll, but be controlled by a left and right arrow, and be scrollable to either the left or right. If anyone could help me out that would be great. Here is the code I have so far: import com.greensock.*; var startX:Number=parent_mc.x; var distanceToScroll:Number = 44; var lastItemX:Number = parent_mc.width function scrollIt() { TweenMax.to(parent_mc, .54, {x:String(distanceToScroll), onComplete:resetDelay}); } function resetDelay(){ TweenLite.delayedCall(.5, reset); } function reset() { //move all clips over to the right for each (var mc in parent_mc) { mc.x+=distanceToScroll; if (mc.x >= lastItemX) { mc.x-= lastItemX; } } //shift the parent so it looks like nothing moved parent_mc.x = startX //scroll it again after 1 second TweenLite.delayedCall(.2, scrollIt); } btn.addEventListener(MouseEvent.CLICK, toggleMask) function toggleMask(e:Event = null):void{ parent_mc.mask = (parent_mc.mask) ? null : mask_mc } toggleMask(); TweenLite.delayedCall(1, scrollIt); Here is it moving backward import com.greensock.*; var startX:Number=mask_mc.x; var distanceToScroll:Number = 44; var lastItemX:Number = parent_mc.width parent_mc.x = startX function scrollIt() { TweenMax.to(parent_mc, .54, {x:String(-distanceToScroll), onComplete:resetDelay}); } function resetDelay(){ TweenLite.delayedCall(.5, reset); } function reset() { //move all clips over to the right for each (var mc in parent_mc) { mc.x-=distanceToScroll; if (mc.x < 0) { mc.x+=lastItemX; } } //shift the parent so it looks like nothing moved parent_mc.x = startX //scroll it again after 1 second TweenLite.delayedCall(.2, scrollIt); } btn.addEventListener(MouseEvent.CLICK, toggleMask) function toggleMask(e:Event = null):void{ parent_mc.mask = (parent_mc.mask) ? null : mask_mc } toggleMask(); TweenLite.delayedCall(1, scrollIt); Let me know how to make this scroll on onclick only and left and right - I feel like it's close...