Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'tweenlite'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. I need to animate a bunch of sprites (well, they're animals) within a rectangular (but not square) boundary. I'd like to move them around in a random, non-jittery fashion -- perhaps random bezier curves. I'm also keen to move the ones at the top back in the z-space, and those at the bottom nearer (I suppose I can simply do a loop through each time and map y coord to z coord). I found some nice Greensock code (posted at the bottom) that will move animals in a circular area, but I need to be able to move within an arbitrary rectangular area (again, of arbitrary ratio, not necessarily square). Is there any other similar code here that would work for that, or is there any easy way to modify this code to make it work (boundary checking? Sin's and cos's are not my forte tonight). Any help much appreciated! var xCenter:Number = 275; var yCenter:Number = 200; var poolRadius:Number = 200; function tweenFish():void { var angle:Number = Math.random() * Math.PI * 2; //random angle in radians var radius:Number = Math.random() * poolRadius; TweenLite.to(fish, 2, {x:Math.cos(angle) * radius + xCenter, y:Math.sin(angle) * radius + yCenter, ease:Quad.easeInOut, onComplete:tweenFish}); } tweenFish();
  2. Hi there, and thank you for these fine greensock tween engines. Can't imagine how many flash banners I've made importing that com.greensock package. So let's cut to the chase, I've started using greensock for html-banners as well and ran through a problem. TweenLite onComplete triggers right away. I've searched the forums and all but didn't find anything on this. Here's the (stripped) code that's not working: function init() { TweenLite.to('#frame1', .3, {opacity: 1, delay: 0, onComplete: arrowLoop, onCompleteParams:[arrow1]}) TweenLite.from('#arrow2', .3, {opacity: 0, top:"-=10",delay: 10, onComplete: arrowLoop, onCompleteParams:[arrow2]}) } In arrowLoop(arrow) function I logged the arrow and it traces right away the latter arrow2 twice before the arrowLoop is called for arrow1. If I comment the latter tween out then the arrowLoop works just fine. This one works correctly: function init() { TweenLite.to('#frame1', .3, {css:{opacity: 1}, delay: 0}) TweenLite.delayedCall(.5, arrowLoop, [arrow1]); TweenLite.from('#arrow2', .3, {css:{opacity: 0, top:"-=10px"},delay: 10}) TweenLite.delayedCall(10.3, arrowLoop, [arrow2]); }
  3. import com.greensock.*; TweenLite.from( test, 2, { x: 1000, onComplete: onCompleteHandler } ); function onCompleteHandler() : void { trace( 'hit' ); } Is onComplete when using "from" intended to fire before and after? Because it is.
  4. Hi guys, Thanks for an amazing product. I wanted to get some advice on the best way to handle what seems to be a recurring issue for me. I always try to OOP all my animations/tweens as much as possible. One issue i keep running into that I haven't gracefully figured out how to handle is when a tween is not completely finished and another tween on the same object fires. Normally in jQuery using animate(), I would just chain in .stop(false,true) to basically stop the tween right there, clear the animation queue and then start the newly fired tween using the element's current state as the starting properties of the new tween. Right now im sniffing around the invalidate() method as possibly being a solution for this but am not totally sure. Thanks in advance!
  5. i was trying to use the className property on TweenLite to add and remove a css class from an element during mouse over an mouse out. using jquery, i had done something like this: this.$container.hover( function( evt ) { TweenLite.to( _this.$content, 0.5, { className: "+=open", ease: Expo.easeInOut }); }, function( evt ) { TweenLite.to( _this.$content, 0.5, { className: "-=open", ease: Expo.easeInOut }); }); the problem i'm having is when i interrupt the animation with another mouse event that will cause it to remove the class before the animation is finnished, it seems the class name doesnt actually become added onto the element until after the animation is complete. so if you hover in and hover out before the animation completes, there wont be any class name to remove and the tween for removing the class will be ignored. i hope this makes sense. thanks for you time!
  6. Hello everyone, I need help here. I tried Greenshock's Tweenlite, but I found the animation appears "jumpy". I don't know what's wrong The file's attached. Here's the code of document class: package { import com.greensock.*; import com.greensock.easing.Back; import flash.display.MovieClip; /** * ... * @author */ public class Main extends MovieClip { public function Main() { TweenLite.to(box_mc, 3, { x:100, y:100, ease:Back.easeOut } ); } } } // (I used Flash CS 6 btw )
  7. Hey there, I have been trying to learn how to use greensock for all my animations for my entertainment technoloy classes. There is one menu I have been trying to recreate, and I am not sure how they did it. The site is www.newcastlebrown.com . the menu is on the left side of the website. I am sure it is something I am overlooking and probably somewhat simple to do. If anyone has any insigt to how to do this, please let me know. Code samples are much appreciated. I know they used greensock and tweenlite, so this is why I came to this forum to ask this question. Thanks guys!
  8. Hello! First of all: Thank you for your great work! I`m trying to move a dynamic TextField from the bottom of the screen to the top and it works. It runs nice and smoothly on my PC. The problem starts when I run the .swf on a target, which is not as powerful as my developement PC. The text animation becomes quite choppy. I tried several things (cache text as bitmap via BitmapData, using TweenLite and now using BlitMask) to improove the performance and I could manage to get 11-12 FPS on the target hardware. That`s "ok".. but it would be nice to squeeze out some more FPS. Globally I define a Blitmask: var txtMask:BlitMask = null; I initialize it: txtMask = new BlitMask(txtMessage, 0, 680, movieWidth, textAreaHeight,true); ...and start the animation: txtMessage.text = msg; txtMessage.y = movieHeight; txtMessage.height = txtMessage.textHeight + 4; txtMask.update(null, true); TweenLite.to(txtMessage, Number((txtMessage.height + textAreaHeight) / textScrollSpeed), {y:(movieHeight - textAreaHeight - txtMessage.height),onComplete:onTextScrollFinish, ease:Linear.easeNone,onUpdate:txtMask.update,useFrames:false,immediateRender:true}); I also tried to tween the scrollY attribute of the BlitMask, but this didn't change anything (as expected). So I guess I just wanted to ask if someone has an idea how I could further inprove the performance of the TextField animation. Would it help to try the ThrowProps plugin? Thank you for your time
  9. hello there,I've got a problem in my project. I've got 5 button to control an element to rotate. TweenLite.to($("#element"), 1, {css:{rotation:"+="+72*($(this).index("#button div")-num)}}); "num" is the current number of the button. But if i click on one button and click another button quickly,then the first rotate animation hasn't finished and the second one start,so it's not i want. Is there any way to solve my problem? Thx guys,I've been stuck for two days...
  10. giv me an example for using useFrames:true in tweenlite/max. The animations are fine in a pc, but are jerky in a mobile device.. I want animations to be look like those in Windows 8.
  11. Hello, I'm just starting with TweenLite and I have a very basic question: I tween a movieclip in a mouseup event (it is a simple scroll), using this: TweenLite.to(mc, 2, {throwProps:{x:200, y:0}, ease:Strong.easeOut}); The effect looks good, but I need to limit the movieclip "mc" X. The mc may have a maximum X value of 0, and a minimum of -1500, so I can tween the mc without showing the background under the mc. Is there any way to limit the tween or to stop the tween when the mc reach the limits? Thank you very much.
  12. There have been a number of posts here about various ways to preload images or build dynamic slideshows with the javascript version of GSAP. Please check out this tutorial by Michael from nightlycoding.com. He did an excellent job: http://nightlycoding.com/index.php/2012/09/image-slideshow-with-preloadjs-jquery-and-tweenmax/ Keep an eye on him. He has a number of GreenSock tutorials. Very cool. Carl ---
  13. Hi Has anybody got experience using TweenLite with EaselJS? I would rather use TweenLite because of the performance and familiarity I have with it. But not sure if EaselJS will work better with TweenJS, as both come from createjs.com. Thanks James
  14. Hi all, In previous versions of GSAP you have the OutIn easing equations, such as BounceOutIn. In GSAP v12 however, I can't find these. Even in the main class Bounce, I have only spotted 3 variants of the ease : out, in, and inOut. Where's the OutIn versions of each ease? Do you have to use InOut as OutIn by reversing it in some way? Am I missing something here? Thanks
  15. Hi all, TweenLite allows relative property tweening if the value is supplied as a string. When is this useful? Apart from the obvious like when you want to move an object offscreen you say "x:10000". But I would still prefer calculating the value absolutely. I simply can't see one real world application for relative tweening. Can anyone tell me if they used it? or where it would be good to use it? Maybe something like this? TweenLite.to(obj, {x: 50}); TweenLite.to(obj, {x: "10"}); // goes to 60 TweenLite.to(obj, {x: "-10"}); // goes back to 50 Is this a practical example or are there more? Thanks
  16. Hi, This is another architectural question, and relates to the starting part of the tween. In the code I'm looking at (GSAP v10), activate() and initTweenVals() is called on the first render(), and then the tween is marked as inited and not inited again. Why is activate() not done in the constructor itself? What are the implications of such a design? Would this cause errors in the tweening engine or the way its used? Yes, I understand that in the present system the tween is initialized on the next enterFrame event (ie. the frame after its created), but are there any advantages to doing it like this? What if the tween were inited on the same frame? Thanks
  17. Hi all, I recently stumbled upon MoveThis, another tweening engine. If you scroll down to the Gears demo, you'll see demos of Arch and Reverse, probably 2 tween easing equations. (I can't figure if they are just different names for existing Penner equations, although they are signed by "Todd Williams" aka taterboy) Would adding these eases into TweenLite be of any use? Unless they are already added. Also, MoveThis has a nice "easingStrength" parameter that apparently controls the amount of ease applied. Does TL have anything like that? Would it be a useful addition? Thanks
  18. Hi all, This is more of a user question rather than a technical one. Can you give me some usage examples of easeParams? Currently I think its only used for complex equations that need such params, although I still don't know how or when you'd use these config parameters : a Amplitude p Period o Overshoot Thanks
  19. I'm new to JS/CSS (coming from AS3) -- I wonder if someone could help me figure out the following: I'd like to have tabs at the bottom of a page which, when rolled over (or clicked) slide up. The tabs will contain images of 45px height. I'd like, say, the extended tab to be something like 100px in height. I gather this has something to do with overflow, hidden, auto, etc -- I've seen solutions using jQuery slide, but I'm not sure how to do it with Greensock -- that is, I am well-versed in the GS engines, but putting it all together (CSS, DIVs, overflows, etc) is throwing me. Any help much appreciated!
  20. Hi, I've found this code inside the initTweenVals() function of GSAP v10. Why is it needed? I'm not using timeScale anywhere, but is the tweening engine using it for something? if (vars.timeScale != undefined && target.hasOwnProperty("timeScale")) { tweens[tweens.length] = new TweenInfo(target, "timeScale", target.timeScale, vars.timeScale - target.timeScale, "timeScale", false); //[object, property, start, change, name, isPlugin] } Thanks
  21. Hi all, Currently TweenLite marks completed tweens for garbage collection by setting gc=true. This gc var is later detected by the enterFrame function and the tween is removed from the masterList array using splice. Is there any specific reason its done like this? Could this not have been done directly in the complete() function? Thanks
  22. Hi, What is the difference between TintPlugin and HexColorsPlugin? HexColors says it tweens colors so they "look correct", does tint plugin use a dumber version of the same? Thanks
  23. Hi all, I wanted to know how the EndArrayPlugin is different from the regular TweenLite? Comparing: var myArray:Array = [1,2,3,4]; TweenLite.to(myArray, 1.5, [10,20,30,40]); And the alternate EndArray syntax: var myArray:Array = [1,2,3,4]; TweenLite.to(myArray, 1.5, {endArray:[10,20,30,40]}); How would that be different? And I looked at the code in EndArrayPlugin, it supports round on/off which TweenLite does not? Is that the only difference or is there more? They both work, I've tested them.
  24. Hi all, This is more of a technical question, but anyways. I noticed that the "masterList" Dictionary object is cached in a local var before iterating through it. Why is this? Is there any speed benefit? var ml:Dictionary = masterList; var tgt:Object; for (tgt in ml) { I was just curious if this was needed. Thanks.
  25. Alan

    bezier in javascript

    Hi, I wonder if we will have bezier support in javascript version soon? I had a great success with greensock and easelJs together, I can almost 100% duplicate what I have done with actionscript 3 before, apart from bezier curve animation...