mathias5

Hi, i have this horizontal list of images stored in a container mc. The container is masked and i want to animate the container when clicking on next/prev buttons. the container should then slide so a new image gets visible. I ll try to explain it a bit better. the container is a movie clip with a dynamic with. the mask has a fixed with (so correct amount of images get shown). all images are aligned horizontal. now i want to animate the container on click left/prev so the images thats visible changes. Here is the positioning of the images. I don't know how to get the sliding work. for(var i:int = 0; i<this.container.numChildren; i++) { var mc:DisplayObject = this.container.getChildAt(i); if(mc is MovieClip) { mc.x = xPos; xPos += mc.width + margin; mc.y = 0; } } Currently my sliding function looks like this: private function slideLeft(event:MouseEvent):void { if(!TweenMax.isTweening(container)) { var tx:Number = Math.min(container.x + itemWidth, _mask.x); TweenMax.to(container, 0.4, {x:Math.floor(tx),ease:Expo.easeInOut}); } } private function slideRight(event:MouseEvent):void { if(!TweenMax.isTweening(container)) { var tx:Number = Math.max(container.x - itemWidth, _mask.x-_mask.width); TweenMax.to(container, 0.4, {x:Math.floor(tx),ease:Expo.easeInOut}); } } Here is an image of what i meen.

Hi, trying to get this z-sorting to work proper. What i want to achieve is some kind of looping/carousel. When a ".area" is getting clicked it should be placed at the very bottom z-wize. And when all elements have been set to bottom they should start to be placed up again. Really like an carousel but z-wise. Any ideas? fiddle: http://jsfiddle.net/EjpSu/8/

Hi, Rodrigo's last answer did the job! Thank you guys!

Hi, thank you! I have tested your code now. When i now start to drag one card i get this error: ReferenceError: $this is not defined. Its on line 38 in your code, the if statements. Any idea? if(TweenMax.isTweening($this))

Hi, I've tried to make it a loop instead but it did not work. The problem was the same. I can't put the tweens in the draggable callback since i do -=180 and +=180 in the tweens which will make the element to move continuously. Hm,to create a function and pass target and rotation sound like the way to go maybe. How would i do that?

Hi, Thanks! Here is an updated example with 3 cards. Now you can more see what the problem is. When dragging a card and the flip-tween runs it flips all cards. Its suppose to only flip the current. http://jsfiddle.net/AFU3T/11/

Here is a fiddle. What i need help with is so i can run the tweens multiple elements of the class. Lets say I'm looping out 20 cards. Then i want the tweens to be applied individually. http://jsfiddle.net/nPM5V/

Hi, thanks for your answer. The thing is that i can't pass THIS. thats because i run the tweens in a jquery draggable and the tweens is declared outside of that scope. I can try to put it on a fiddle.

In an init() function i declare these two tweens. var tweenLeft = new TweenLite.to($(".card"), 0.6, { rotationY: '+='+rotVal, transformStyle:"preserve-3d",ease:Back.easeOut,perspectiveOrigin:'50% 50% 0px', paused:true, perspective:1000}); var tweenRight = new TweenLite.to($(".card"), 0.6, { rotationY: '-='+rotVal, transformStyle:"preserve-3d",ease:Back.easeOut,perspectiveOrigin:'50% 50% 0px', paused:true,perspective:1000}); Later on in a drag() function i run this to start the tweens: tweenRight.restart(); tweenLeft.restart(); When i start to drag the ".card" all of them gets the tween. I have 20 of these cards and want the tween to be applied individually on each of them. Is it possible to somehow on the fly just change the element in the tween?

Hi! Created a little jsfiddle. Dit not get the actual dragging to work in there, never using it before. But hopefully you get the idea on the code. http://jsfiddle.net/9jHMX/

Wow, thanks guys! I have been looking at all suggestions and implemented it. It almost works now. I run this on a query draggable event which makes it an infinite tween. How can i pause/stop the tween after every step/180 and then continue on next drag? mean so its not continuously spinning. This is what i run in my drag. var tweenLeft = new TweenLite.to($(el), 1, { rotationY: '+=180', transformStyle:"preserve-3d",ease:Back.easeOut,perspectiveOrigin:'50% 50% 0px', paused:true}); var tweenRight = new TweenLite.to($(el), 1, { rotationY: '-=180', transformStyle:"preserve-3d",ease:Back.easeOut,perspectiveOrigin:'50% 50% 0px', paused:true}); if(dirX == "right"){ tweenRight.restart(); } if(dirX == "left") { tweenLeft.restart(); }

Hi and thank you! I'm actually using your code pen as a reerence for my stuff. I only changed some things. I think i made the description of my problem a bit too complicated. What i need is this: When you have flipped the card and its on -180 i want to be able the control in what direction it should flip back. Almost like a toggle. Now i flip it to -360 when flipping it back. That looks nice. But when i then try to flip it over ageing to its initial (-180) it all gets buggy. Some how i need the flipping-value to be dynamic. As an example. Your code pen always flips in the same direction. I'd like to be able to control in which direction it should flip back after it has flipped once.

having some trouble with an tweenlite animation in query. I want to switch the animation direction depending on a variable. I have a variable that represents "left" or "right". those values is set when the user drags the mouse in that direction. And i need to change my animation so it animates in the right direction depending on this variable. The animation basically flips a div. Like a card flip. Need the get the rotation value somehow dynamic. Anyone having an idea? CODE var tb = false; if (dirX == "right") { if (tb == false) { TweenLite.to($(this).find(".obj"), 1, { rotationY: -180, transformStyle: "preserve-3d", ease: Back.easeOut, onComplete: function () { TweenLite.set($(this).find(".obj"), { rotationY: -180 }); tb = true; } }); } if (tb == true) { TweenLite.to($(this).find(".obj"), 1, { rotationY: -360, transformStyle: "preserve-3d", ease: Back.easeOut, onComplete: function () { TweenLite.set($(this).find(".obj"), { rotationY: -360 }); tb = false; } }); } } if (dirX == "left") { //the opposit }