Search the Community
Showing results for tags 'dynamic'.
Found 30 results
-
Hello, I would like to start and reverse a timeline animation for the element that I'm hovering with the mouse. Then on mouseleave I would like to reverse this animation. I know I could create a timeline for each possible element. However is it also possible to tell the timeline which element should be effected with the animation by passing the element ID to the timeline? Something like this: <div id="navipoint-board"> <div class="navipoints"><a href="/control/category/~category_id=MANGO"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_mango.png" id="mango"></a></div> <div class="navipoints"><a href="/control/category/~category_id=ROTEFRUECHTE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_rotefruechte.png" id="rotefruechte"></a></div> <div class="navipoints"><a href="/control/category/~category_id=ERDBEERE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_erdbeere.png" id="erdbeere"></a></div> <div class="navipoints"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/active_vanille.png" id="vanille"></div> <div class="navipoints"><a href="/control/category/~category_id=HAFER"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_hafer.png" id="hafer"></a></div> <div class="navipoints"><a href="/control/category/~category_id=OLIVE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_olive.png" id="olive"></a></div> <div class="navipoints"><a href="/control/category/~category_id=PFIRSICH"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_pfirsich.png" id="pfirsich"></a></div> <div class="navipoints"><a href="/control/category/~category_id=KOKOS"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_kokos.png" id="kokos"></a></div> </div> <script type="text/javascript"> $(document).ready(function() { TweenMax.to($('.navipoints a img'), 0, {rotation:"20"}); var tlRotation = new TimelineMax({paused:true}); tlRotation.to("Mouseover-Element", 0.5, {rotation:"0"}); $('.navipoints a img').mouseenter(function() {tlRotation.play(this);}); $('.navipoints a img').mouseleave(function() {tlRotation.reverse(this);}); }); </script> Thank you very much, Robert
-
http://jsfiddle.net/ccarterc1984/5t9EU/2/ First timeline seems to work great. It animates each box individually forward and backward. Upon completion of the reverse animation, I call a function which runs the second timeline. However the second timeline does not animate, it simply sets the properties instantly.
-
I have several elements which will be using the same animation functions. So I want to have a timeline for animating 20 px to the left for instance. How do I pass in the element to the timeline without knowing before hand which element will need to be moved? I imagine the most efficient way is to not create a new timeline variable each time which what I think is throwing me for a loop. e.g. http://jsfiddle.net/ccarterc1984/6LQhJ/ This is my first day trying Greensock so be gentle.
-
INTENDED EFFECT: I have a TweenMax with a variable for the target. This target is the current element. var currentElement = $("#div1"); The tween is nested inside a TimelineMax set to repeat. Once the tween completes, an onComplete fires. Within my onComplete function, the target will dynamically change. currentElement = $("#div2"); ISSUE: Target never changes on timeline repeat of the nested tween, even after redefining the variable. I know that invalidate() works with changes in vars parameter, but it does not work with the target. QUESTION: Is there any way to achieve the intended effect? Any help much appreciated.
-
Hello, I'm trying to transform a text input field that should resize the text font size when scaling the transform item, and that should resize itself when the user writes text in it. To resize the text field i set the "autoSize" property to true, and to increase the font size i wrapped the text field with a movieclip and then add that to the TransformManager. Here is my code: //create the font format var font: Font = new FuturaStdBold(); _textFormat = new TextFormat(); _textFormat.size = 18; _textFormat.align = "center"; _textFormat.font = font.fontName; //Create the text field _textField = new TextField(); _textField.width = 200; _textField.height = 40; _textField.x = 100; _textField.y = 100; _textField.type = "input"; _textField.multiline = true; _textField.embedFonts = true; _textField.autoSize = TextFieldAutoSize.CENTER; _textField.defaultTextFormat = _textFormat; _textField.text = "Ingresa tu texto aquí..."; _textField.addEventListener(Event.CHANGE, keyStroked, false, 0, true);[/font] [font=arial, helvetica, sans-serif]//[/font][font=arial, helvetica, sans-serif]_mcConte is the wrapper for the text field[/font] [font=arial, helvetica, sans-serif]_mcConte.addChild(_textField); //add the item to the stage _container.addChild(_mcConte); //add the item to the transformManager _transItem = _transManager.addItem(_mcConte); _transItem.hasSelectableText = true;[/font] The resize of the text field works fine, however the scaling does not. When i try to scale the item and it has some rotation, the text field gets out of the transformManager Box, but if i set "hasSelectableText" to false, then the scaling works but i cant input text. Any help would be greatly appreciated. I attached some screenshots of the problem.
