Search the Community
Showing results for tags 'rotate'.
-
Hi, have started getting familiar with JS from AS3, want to work with GSAP of course I'm animating svgtags instead of divs, I'm not sure what is the cause of the issue, I'm doing a basic tween to rotate 360 degrees with repeat at -1. It starts off ok being centered where I want it and also ends at the same location, during the spin though it shifts to the side a bit for some reason. Any ideas? I'll try get a codepen up after I've slept. Not sure if I'll be able to load the specific graphic via codepen or not.
-
Hi guys, I am animating a div with a transparent background (the ball). When I use rotation the transparent background seems to get a black background in IE8. This only appears when I use css rotation in my animation. Is there someone who have seen this before and knows how to get rid of this problem? Is it possible to use rotation in any other way than css? This is what my animation looks like; tlBall.to(ball, 0.2, {css:{left:"400px",top:"366px",rotation:360}, delay:0, ease:Sine.easeInOut}) This is that the background with the ball looks like; http://cl.ly/image/1U2a0w0T3O17/image004.png Thanks! - Marcus
-
Hello, Is someone tried to extend "Draggable" to make it possible to use the multi-touch and so with two fingers simultaneously rotate, scale and move an object ? This is a general question but I did not really find an answer on the forum. Before leaving for prototyping I'm not sure this is possible. Is someone has any feedback on this point ?
-
Hi, First I want to say how impressed I am from GASP! My question is: How can I make a cubic bezier type rotate? In this codepen an object is animated on a bezier cubic path, where each leg of the path has it's own time length, color and size, but I cannot find a way to set the rotation. How can I do that?... I need a cubic type because I want a different timing for each leg, so I must first create the entire path via bezierThrough() and then animate each leg separately. Thanks, Elior.
-
dynamic text field in TransformManager: text disappears on rotate
Dcoo posted a topic in TransformManager (Flash)
is there sorting I could do to stop my dynamic text field from disappearing on rotate ? yourtxt.addEventListener(MouseEvent.CLICK, textFrom); function textFrom(event:MouseEvent):void { var textFormat:TextFormat = new TextFormat("Cubano","35","0xEFB20C","focusRectPadding",0); var textField:TextField = new TextField(); textField.defaultTextFormat = textFormat; textField.text = 'Your text here'; textField.x = 258.75; textField.y = 100; textField.width = 300; textField.height = 80; textField.multiline = true; textField.wordWrap = true; textField.type = "input"; textField.addEventListener(Event.RENDER, fixFocusRect); function fixFocusRect(event:Event):void { event.target.drawFocus(false); } addChild(textField); var manager:TransformManager = new TransformManager({targetObjects:[textField],hasSelectableText:true,forceSelectionToFront:true,allowDelete:true,autoDeselect:true,handleSize:22}); }- 3 replies
-
- transformmanager
- dynamic text field
-
(and 1 more)
Tagged with:
-
Hello, I was wondering if it's possible to 3D-Rotate KineticJS objects (shapes). With Tweenmax. If you happen to have some examples please let me know. Thanks.
-
Can anybody help to fix the IE10 issue (text on the panel is upside down) all other browser the tab work correctly Experiment code http://codepen.io/bobbykc13/pen/Itswb
-
Hi good people of the forum. I'm trying to animate an opening gift box with the lid popping of and the sides folding down. I was able to do a draft concept using shape tweens in Flash itself after struggling like hell trying to do it with TweenMax. (attached is the swf) I'm fairly familiar with TweenMax / TimelineMax. Something like TweenMax.to(mc, 2, {rotationY:90}) is easy but I quickly run into issues as far as the anchoring points go especially when it comes to the skewed sides. Anybody got some great ideas to get me going? Cheers gift box.zip
-
Hi, I am trying to make an animation where a wheel eases in to rotate quickly then stops really slowly for 10 seconds. So I would like it to run slowly for about the last 3 seconds. I am struggling to get this really slow ease out and was hoping someone would have some advice? I have looked at every ease class available, I have tried making my own custom ease, but it seems I just cannot physically achieve the ease out I want. I have also tried using the ThrowProps plugin but again the easing was not good enough. All I want is an ease out that causes the rotation to move really slowly for the last third of my animation. I generally use the TweenLite.to() method to start my animation. Thanks!
-
Hello GreenSock, Lately, I've been getting into some projects that combine the Flash display list, the Starling framework, and the Away3D framework. What a crazy mixed up world -- especially when it comes to rotation properties. As a Flash-based Stage3D framework, Away3D "sensibly" defaults to degrees (despite what some of my Unity guys might think of that). However, Starling kinda gums up the proverbial works by hopping to radians for expressions of rotation. Granted, if an AS3 developer is using matrix transforms on a regular basis, radians are going to make some sense. But for most Flash (and GreenSock) users migrating to Starling, this can be a challenge. Perhaps we could register a new plugin that provides "useRadians:true" at the level of simple rotation tweens. I've enjoyed the convenience of "useRadians" on both the ShortRotationPlugin and the BezierPlugin, but when it comes to simple rotations (especially where ShortRotation is not applicable), the only solution I found has been to create custom unit-converting "myRotation" getter/setter on the custom class. What is your suggestion? Maybe I'm missing something obvious, if so please rap my knuckle. Otherwise, might this call for a new plugin? such as... TweenMax.to(myStarlingSprite, 10, {radianRotation:{rotation:Math.PI*2}, repeat:-1, ease:Linear.easeNone}); // rotate the starling sprite '360 degrees' every 10 seconds
-
Hi, I am trying to create an application where cards flip in 3D using TweenMax to change the rotationY properties of a movieClip. However, I am noticing that if I tween a card in scale + rotationY (to "flip it up") and then tween it back down (to "flip it down") - it doesn't land in the exact position as it was before I "flipped it up." The application I am building requires precision on this because my cards will be in a tightly aligned grid, this difference is noticeable and unwanted. I have attached a sample of the issue - click on the lighter blue card in the center of the grid and then again to flip it back. Notice the bottom and right gutters between that card and the others is overlapped now - like the card nudged 1px right and down after tweening. If anyone has any thoughts? My gut tells me this is just the cost for using a plugin to tween (which by the way I LOVE these plugins) - but maybe there is some way to get more precision through TweenMax on the final placement of the MovieClip. Also - I know I can place an onComplete call to a function that resizes/positions my movie clip after it tweens, but I am hoping to avoid that. Many thanks in advance! CardFlip.fla.zip
-
import com.greensock.*; import com.greensock.easing.*; var section_clips = [mc01]; for (var j:Number = 0; j < section_clips.length; j++) { section_clips[j].alpha = 0; } var portfolio_clips = []; for (var i:Number = 1; i <=12; i++) { portfolio_clips.push(mc01["m"+i]); portfolio_clips.push(mc01["m0"+i]); } var tl:TimelineMax = new TimelineMax({}); tl.timeScale = 1; tl.append(TweenMax.to(mc01, 0, {alpha:1, immediateRender:false})); tl.appendMultiple(TweenMax.allFrom(portfolio_clips, .5, {rotationY:"180", alpha:0}, .3)); ================================================================= Please understand does clumsy English I am greensock novice. This, to me the difficulty In the above code, ["m0"+i] I -180 road rotates and would like to be. And mc02 add is to make the rotation above mc01. And the mc01 and mc02, I would like to repeat and infinity.
-
Hi Jack, For years I looked at this in .as and never dove in, but now in just signed up corporate just so I can use .js version (not interested in flash no more). I need help w/ cubic css3 transform, possibly some consulting for the ticket. When I say cubic, here is an example: <click cubic> http://moobilejs.com/demos/latest/moobile-simulator/index.html He does this w/ very complex css3 and I can't follow, and he does it for the entire page and I just need the form to 'cubic'. Here is his css3: https://github.com/jpdery/moobile-core/tree/master/Styles Can I get some help to get a simple version that just does a 'cubic' of a form? So I can go next, next, next for 15 steps on mobile. thx, Vic