Search the Community

First of all, great job on the carousel! Looks great and it animated very smoothly for me. Regarding the z positioning, let me first just give you the quick solution, then I'll explain what I think might be happening... If you want to rotate the object around a point that's pushed back in 3D space, you can use the transformOrigin, like: transformOrigin:"50%, 50%, "+ value + "px" GSAP even works around the Safari bug that would normally cause 3D origins to render incorrectly. Now let me explain a key concept related to 3D transforms that I think may have been affecting you... TweenMax always applies transforms in a particular order whereas in css you can vary the order. For example, these two lines of css produce very different results: transform: rotateY(30deg) translateZ(100px) transform: translateZ(100px) rotateY(30deg) So I think you were trying to apply things in an order that isn't the standard TweenMax way, that's all. You could get the same effect, of course, by doing the math or using transformOrigin, or you could even pass in a string to a TweenMax.set() like this: TweenMax.set(element, {transform:"rotateY(30deg) translateZ(100px)"}); That way, you don't have to worry about any of those pesky vendor prefixes. GSAP handles it for you. The only down side to that is that when TweenMax parses the rotation or position values, they may not match what you expected. It's kinda like what happens in Flash when you set rotation to 270 or something and then you trace() it and get –90. The same matrix3d() can represent an almost infinite number of different combinations of transforms. TweenMax always parses and sets in a particular order to make things consistent. But if you apply things manually in your css in a different order, it may parse the values differently even though it'll look exactly the same visually. Does that clear things up?

Hey TweenMaxers, Was futzin around and prototyped up a 3d carousel (http://codepen.io/johnblazek/full/nceyw, also using on my personal site) that works well in Webkit, followed by Safari and maybe IE10 (it doesn't work on my VM) Noticed a couple things happening when I tried to animate on the Z axis. 1. In lines 60-64 in the JS, I'm defaulting to use the vendor prefixes in order to get translateZ to show true perspective. Tried using this code: TweenMax.set($item, { rotationY: rY * i, z:radius }), but throws some weird positions when used. 2. The other weird thing is if you reference line 103 and 104, you'll notice I broke them up into 2 calls, one, a "to," and the other a "set" because when I tried combining them and animate the z axis along with rotation X and Y, once you go past rotation Y -90 degrees and 90 degrees, it spazzes out. Any ideas?

Was really pleased when I came across this, as I'm having to define Easing as strings a lot of the time, although for some reason it isn't working for me. I always get - ReferenceError: EaseLookup is not defined - whenever I try to put it into action. I tried to get it to work in one of the example files (carousel.html), just in case my own files were missing something or had something in them that was interfering but no dice. TweenLite.fromTo(boxes[i], 1, {css:{marginTop:-500}}, {css:positions[boxes[i].attr("data-pos")], delay:i * 0.1 + 0.25, ease:EaseLookup.find("Elastic.easeOut")}); Same error as above, and EasePack.min. js is loaded in the header etc.

Hi, everyone! I want to add functionality to my photo gallery app (Air mobile) - different types of animation of the thumbs of the photos. Now I did like the code below. This is the simplest move left-right and top-bottom. But I need more different patterns of animation y- the movement as a 3D carousel, spinning in a circle, orbiting, movement of the sun's rays and back, movement along the wave path etc. I would be very grateful if you have a ready-made pieces of code for these and similar animations with help TweenLite lib. [bindable] private var stageW:int = Capabilities.screenResolutionX; [bindable] private var stageH:int = Capabilities.screenResolutionY; private var itemsVector:Vector.<Image>=new Vector.<Image>(); private var xSpeedVector:Vector.<Number>=new Vector.<Number>(); private var ySpeedVector:Vector.<Number>=new Vector.<Number>(); stage.addEventListener(Event.ENTER_FRAME, update); private function moveSetup():void { for(var i:int = 0; i < FlexGlobals.topLevelApplication.objects.length; i++){ if (FlexGlobals.topLevelApplication.objects[i] is Image){ var item:Image=FlexGlobals.topLevelApplication.objects[i] as Image; item.x=Math.random()*stageW; item.y=Math.random()*stageH; var randomDirection:Number=Math.random()*2*Math.PI; this.addElement(item); itemsVector.push(item); xSpeedVector.push(2*Math.cos(randomDirection)); ySpeedVector.push(2*Math.sin(randomDirection)); } } } protected function update(event:Event):void { for(var i:uint=0;i<itemsVector.length;i++){ itemsVector[i].x+=xSpeedVector[i]; itemsVector[i].y+=ySpeedVector[i]; if(itemsVector[i].x>stageW){ itemsVector[i].x-=stageW; } if(itemsVector[i].x<0){ itemsVector[i].x+=stageW; } if(itemsVector[i].y>stageH){ itemsVector[i].y-=stageH; } if(itemsVector[i].y<0){ itemsVector[i].y+=stageH; } } } .

sorry, but there is nothing related to greensock that comes to mind that would make building a carousel like that any easier. if I had to build something like that I would most likely use that tutorial or scour activeden

that's actually a fairly advanced effect that chipotle has. I know for myself it would take me a few hours to figure it out. to simulate the elliptical motion isn't the easiest thing in the world. GreenSock has a CirclePath2D class for animating multiple items along a circular path, but making them all offset their tween directions to make room for the object that is getting larger would take quite a bit of tinkering and custom code development. http://www.greensock.com/as/docs/tween/ ... ath2D.html perhaps someone here has done it before and can give you more beneficial advise. in the meantime, I would search http://www.activeden.net for carousel and see if there is anything similar that you can purchase for a few bucks.

Hello, I am working in a carousel system where elements move from center position to the right or left depending if you click on the left or right arrow. When I click on the left button for instance, the element moves from center to left. If i click several times very fast, all those transitions queue up in my timeLineMax and the animation completes after sometime. Now i want to apply an easeOut effect on this timeLineMax transition, is it possible? Note that the duration of the animation can change depending on the amount of clicks. I know i can set the globalTimeScale property, but there will be no smooth transition. Thanks

Hello, Thanks, i've used the following codes to tween the timeline : var bounceOut:TweenMax = TweenMax.to( _timeline, 2, { currentProgress:1, ease:Quart.easeOut,onComplete:resetNumClicks} ); But i still have a serious problem. Make as if i have eight pages in my carousel. I click 4 times very quickly, i'll have a good transition from page 1 to 5 in 2 seconds as in my codes. Now if i click one more time just before the animation completes, that is somewhere around 1.8sec. The next page shows up in 0.2 seconds only. That is way too fast. How can i solve this problem by controlling the time taken for the animation ?

oh nice! I didn't even think of that! Thanks! The reason I did it the reverse way is because in the example I have there are panels with info on them. So when someone rolls over the flash the animation will pause so they can read the slide. Then when the roll out the animation will continue. Check out my file, you'll see what I mean. Either way your solution seems perfect. Check out my solution so far. http://retropunk.com/files/Carousel-Microsite.zip This is still a prototype but I am trying to get the scroller to be as dynamic as possible but fairly easy to update (xml, external files etc). I also need to figure out how to use a small nav (4 little white boxes) to be able to jump gracefully from slide to slide....tricky! I've done this in the past plenty of times but not using Greensock. I've been wanting to use TimelineMax and I'll make any excuse to learn the Greensock libraries more! You're infinite scroller gave me the idea to give it a try so thanks! Let me know what you think.

They are the instance names of the movie clips on the stage. Below is the full code. The implementation is really strange as we are trying to emulate an interface for an on-wall device that uses a linear carousel design with 5 objects visible on screen that change position and size relative to what is selected. import com.greensock.* var navArray:Array = new Array(mc1, mc2, mc3, mc4, mc5, mc6, mc7, mc8, mc9); //mc1-9 are the instance names of objects on the stage. const pos0X:Number = -200; const pos0Y:Number = 78; const pos0Scale:Number = 0.25; const pos1X:Number = -150; const pos1Y:Number = 40; const pos1Scale:Number = 0.37; const pos2X:Number = 10; const pos2Y:Number = 0; const pos2Scale:Number = 0.67; const pos3X:Number = 249; const pos3Y:Number = 40; const pos3Scale:Number = 0.37; const pos4X:Number = 366; const pos4Y:Number = 78; const pos4Scale:Number = 0.25; init(); function init():void { navArray[0].x = pos0X; navArray[0].y = pos0Y; navArray[0].scaleX = pos0Scale; navArray[0].scaleY = pos0Scale; navArray[1].x = pos1X; navArray[1].y = pos1Y; navArray[1].scaleX = pos1Scale; navArray[1].scaleY = pos1Scale; navArray[2].x = pos2X; navArray[2].y = pos2Y; navArray[2].scaleX = pos2Scale; navArray[2].scaleY = pos2Scale; navArray[3].x = pos3X; navArray[3].y = pos3Y; navArray[3].scaleX = pos3Scale; navArray[3].scaleY = pos3Scale; navArray[4].x = pos4X; navArray[4].y = pos4Y; navArray[4].scaleX = pos4Scale; navArray[4].scaleY = pos4Scale; } function navLeft(e:MouseEvent):void { var theFirst:String = navArray.shift(); navArray.push(theFirst); trace(theFirst + " is shifted"); trace(navArray); tweenItLeft(); } function navRight(e:MouseEvent):void { var theLast:String = navArray.pop(); navArray.unshift(theLast); trace(theLast + " is popped."); trace(navArray); tweenItRight(); } function tweenItRight():void { TweenLite.to(navArray[0], 0.5, {x:pos1X, y:pos1Y, scaleX:pos1Scale}); } function tweenItLeft():void { }

Because I've extended the PathFollower class to monitor the progress property in the progress setter. I'm building a carousel and I want to manage elements by PathFollower progress property like: override public function set progress(value:Number):void { super.progress = value; if(super.progress < 0.75) { super.target.alpha = 0; } } My current concept is that each of the pathFollowers should monitor its progress and perform actions on their targets. Jack if you have any suggestions how to achieve that please give me a tip .

Hi. I found this script (se below) that I need for moving an object attached to a eliptical path. The scrip itself works ok. But what I love to do is to add some smooth tween when mouse is stopped. Or even better have a greensock soulotion for a carousel tweening Maybe with combination of beizer and dynamicProps? I did read about the circle2D class some. But This needs to be As2 because it targets flashplayer8 at minimum. I would offcourse consider a Club memberhip if ther is a way with As2 Regards Olle var rX:Number = 200;// radius1 var rY:Number = 100;// radius2 var ang:Number = 10; // angle to rotate ellipse // var zeroSector:Object = sector(0, rX, rY, ang); function sector(degree:Number, radiusX:Number, radiusY:Number, angle:Number):Object { // coordinates of a point on ellipse var cx:Number = radiusX * Math.cos(degree * Math.PI / 180); var cy:Number = radiusY * Math.sin(degree * Math.PI / 180); // rotation of system of coordinates var xx:Number = cx * Math.cos(angle * Math.PI / 180) - cy * Math.sin(angle * Math.PI / 180); var yy:Number = cx * Math.sin(angle * Math.PI / 180) + cy * Math.cos(angle * Math.PI / 180); return {x:xx, y:yy}; } function objPosition():Void { // detecting coordinates of a clip var ratio:Number = rX / rY; var anAngle = Math.atan2(this._parent._xmouse, this._parent._ymouse) + ang * Math.PI / 180; var deg:Number = 90-(Math.atan2(Math.sin(anAngle), Math.cos(anAngle) * ratio)) * (180 / Math.PI); var _sector:Object = sector(deg, rX, rY, ang); this._x = _sector.x; this._y = _sector.y; } // draw ellipse this.createEmptyMovieClip("mc", 0); mc._x = Stage.width / 2; mc._y = Stage.height / 2; this.mc.lineStyle(0, 0xDDDDDD); this.mc.moveTo(zeroSector.x, zeroSector.y); for (d = 0; d <= 360; d += 5) { var _sector:Object = sector(d, rX, rY, ang); this.mc.lineTo(_sector.x, _sector.y); } // create draggalbe clip mc.createEmptyMovieClip("drag_mc", 0); mc.drag_mc.lineStyle(50, 0x007722, 100); mc.drag_mc.lineTo(0, 1); mc.drag_mc._x = zeroSector.x; mc.drag_mc._y = zeroSector.y; mc.drag_mc.onMouseMove = function():Void { this.onMouseMove = objPosition; this.onRelease = this.onReleaseOutside = function ():Void { delete this.onRelease; delete this.onReleaseOutside; delete this.onMouseMove; }; };

greensock, i can't wait to show you what i did! Its looks simple but it's kinda neat because the carousel is dynamic in that even though it only has 5 spots... it can HOLD more than 5 spots... and cycle and loop correctly in any direction... it wasnt easy.... maybe advanced.... but definitely i wouldnt mind sharing the source or more importantly the thinking behind the code... and prob sell it on activeden This was kind of a challenging project, but I did it for the most part. Thanks greensock and everyone else for your help. updates soon!

First time poster, long time user... I am trying to recreate a carousel effect I found here http://www.danoneactivia.co.uk/ActiviaE ... anges.aspx my question is, is it possible to create points along a path that is illustrated below... see attached diagram

Hey all/Jack. Im having an issue here and im scratching my head, I did do some research and after messing around with the flush parameters it still did not do what I wanted to accomplish So I have to ask for some help on this one. Basically what I am doing is loading in an array of swfs so I can flow through them in a carousel style, with next and previous arrows,logically you click the next arrow,it fades out one swf,and loads in the following swf. However when I use loaderQueue.unload(); and once again load. it will fade out the current swf,but when it loads in the new one it has the new swf overlapping the second one,if i press next again,it has 3 swfs,and so on. So it seems it is not removing my initial content. Hopefully someobody can help me out here Inside of swfVisualView I have public function createListeners():void { BedrockDispatcher.addEventListener( SiteEvent.PREVIOUS_DONE, this.onUnloadSwf ); BedrockDispatcher.addEventListener( SiteEvent.NEXT_DONE, this.onUnloadSwfFinal ); BedrockDispatcher.addEventListener( SiteEvent.NEXT_READY, this.createLoader ); } public function createLoader($event:SiteEvent):void { this.createLoaderQueue(); } public function createLoaderQueue():void { trace("Creating Loader Queue"); var loaderQueue:LoaderMax = new LoaderMax({name:"mainQueue", onProgress:this.onProgressHandler, onComplete:this.onCompleteHandler, onError:this.onErrorHandler}); this.appendLoaders(this.data.swfSource); } // Append Several Loaders public function appendLoaders($url:String):void { var urlRequest:String = (BedrockEngine.config.getEnvironmentValue( BedrockData.SWF_PATH ) + this.data.swfSource ); loaderQueue.append( new SWFLoader(urlRequest, {name:"mainClip", estimatedBytes:3000, container:this, autoPlay:false}) ); loaderQueue.load(true); loaderQueue.autoDispose = true; } public function onUnloadSwf($event:SiteEvent):void { trace("I heard it was time to unload?"); loaderQueue.unload(); loaderQueue.dispose(true); loaderQueue = null; } public function onLoadSwf():void { loaderQueue.load(true); } /* Event Handlers */ public function onProgressHandler($event:LoaderEvent):void { trace("progress: " + $event.target.progress); } public function onCompleteHandler($event:LoaderEvent):void { trace($event.target + " is complete!"); //this.onLoadSwfFinal(); } public function onErrorHandler($event:LoaderEvent):void { trace("error occured with " + $event.target + ": " + $event.text); } Inside of the initial container,where I make my index switches to reload a new swf to load I have public function intro($data:Object=null):void { //BedrockDispatcher.dispatchEvent( new SiteEvent( SiteEvent.NEXT_READY, this) ); TweenLite.to(this.container, 3, {delay:0.5,alpha:1}); } public function outro($data:Object=null):void { TweenLite.to(this.container, 1, {alpha:0,onComplete:this.outroDone}); } public function outroDone():void { } public function clear():void { } /* Create Functions */ public function createListeners():void { ButtonUtil.addListeners( this.leftArrow, { down:this.onPrevious} ); ButtonUtil.addListeners( this.rightArrow, { down:this.onNext} ); } public function outroDoneNext():void { BedrockDispatcher.dispatchEvent( new SiteEvent( SiteEvent.NEXT_DONE, this) ); trace("new index number is " + this.indexNumber++); var currentObject:Object = ReachModel.getInstance().brushes.data[this.indexNumber]; var swfContainerClip:SwfVisualView = new EmptyContainer; this.container.removeChildAt(0); this.container.addChild(swfContainerClip); swfContainerClip.initialize(currentObject); this.intro(); } public function outroDonePrev():void { BedrockDispatcher.dispatchEvent( new SiteEvent( SiteEvent.PREVIOUS_DONE, this) ); var currentObject:Object = ReachModel.getInstance().brushes.data[this.indexNumber]; var swfContainerClip:SwfVisualView = new EmptyContainer; this.container.removeChildAt(0); swfContainerClip.initialize(currentObject); this.container.addChild(swfContainerClip); this.intro(); } /* Event Handlers */ public function onPrevious($event:MouseEvent):void { TweenLite.to(this.container, 1, {alpha:0,onComplete:this.outroDonePrev}); trace("new index number is " + this.indexNumber--); //BedrockDispatcher.dispatchEvent( new SiteEvent( SiteEvent.PREVIOUS_DONE, this) ); } public function onNext($event:MouseEvent):void { TweenLite.to(this.container, 1, {alpha:0,onComplete:this.outroDoneNext}); //BedrockDispatcher.dispatchEvent( new SiteEvent( SiteEvent.PREVIOUS_DONE, this) ); } So basically when I unload I just re initilize a new index so it can load in the next swf in my array. Which ultimately it does do,but it will have every previous swf loaded into it behind it. Thanks in advance

http://dnecklesportfolio.com/transfer/a ... ousel.html I got it to work, I just accessed the movie clips directly instead of through the circle.followers array. question tho, when i click to fast it acts erratically... im thinking it should tell where it should be on the carousel and then go there....even if its a few steps ahead

Hey I've tried it using The plugin and the carousel is working well.. now for the on update, I need access to the movieclips to tell what its progress is...that way I know what their alpha and blur amount should be.. depending on where they are on the circle... tracing out circle.followers.progress I get null.. any thoughts..

Thank you for that tip. Yes I will check it I have an array that holds six positions on the path, that the product should move to. var arrPositions:Array = [ .52,.625,.75,.875,.99,.25 ] when its at position .25 alpha is 0 and when u click the arrow the yogurt in that OFF position, it then moves to the first position at the top or back of the carousel while fading to 100 opacity. I may just work in degrees. Would the plugin make it easier than that? I'll keep it at it. Thanks for the fast response.

http://www.wpi.edu/research/discovery/ http://www.iona.edu/index.cfm (video carousel) http://www.comunica.com/ Love greensock. I was delighted to be able to use the new rotateX and rotateY properties in CS4 with the Comunica site. The new timeline max helped with the Research site in setting up the load/unload animations for each section of videos. I also experimented with tweening the background video itself using the frame property, but the limitations of the video framerate itself had me opting to do that in AE instead. I've used GS in tons of other projects, banner ads, modules, video players, but these are among the nicer ones. This is by far the best tween engine. Fusekit was buggy as all hell. This thing blows it away.

http://www.newburymarket.com/ (just the home page flash) Uses some TweenProxy3D stuff combined with a parallax effect ... all built into a carousel. Perhaps the biggest help was the shortRotation method. HUGE time saver. Thanks GreenSock!!