Search the Community
Showing results for tags 'tweenlite'.
Found 245 results
-
Hi all! Today I was trying to execute some instructions on manual scroll event, avoiding the scroll animation performed by TweenMax. I attempted to initialize a boolean variable, which is false during the TweenMax animation and is restored to true "onComplete". On $(window).on("scroll") I checked the status of the variable. I found out that a scroll even was triggered even when my status variable was already returned to true: after some tests, it turns out that it's TweenMax itself. I tried on an empty page, reporting the following code in Firebug console, and looks like after the "hi" reported by TweenMax onComplete, another scroll event is triggered. $(window).on("scroll", function(){console.log ("scroll");}); TweenMax.to(window, 1, { scrollTo: { y: 500 }, ease: Linear.easeNone, onComplete: function () { console.log("hi!"); } }); I wouldn't expect this behavior: why does this happen? Thanks in advance! Massi
-
Hi, Just started using Tween for JS, used to use AS version, so i was exited to find a JS version First of all works great, BUT I am having som problems with IE8 (( Basically I am trying to scale a Image from small to VERY large. To maintain relative good quality i have initially scale the image down, and I am then using scaleX/scaleY to scale the image up in size. Works like a charm in Safari, Chrom, Firefox and IE9, BUT breaks in IE8 Seams like IE8 is scalling very poorly, very bad quality when scaled up, but WORSE it seems to hide the overflow, so one can only se the image, in the area where the original image was You can see for yourself here: https://dl.dropboxusercontent.com/u/2146283/html/example.htm and fiddle here: http://jsfiddle.net/ha4PT/8/light/ Hope someone can help, would really prefer this over jquery UI Kind regards Mr.Morton
-
Hi, I'm trying to scale (zoom in) on a point based on a hover event handler. The way this is supposed to work: on the baseImage, which is an installation with a bunch of products, we have info icons displayed wherever a relevant product is used. If a user hovers over one of these icons, the baseImage zooms in on that point (info icon). I got it to zoom, but not to the point where I want it to. Is this even possible? I can't help but feel that this isn't as complicated as it's turning out to be. I've hit a wall and any help would be greatly appreciated. See the attached image to get an idea of what I'm talking about.
-
Hi, I have been loading a html file (including tweening) using ajax into a div and on first viewing the Tweens are working. However after clearing the div with jquery.empty() and reloading the same html file the tweens are no longer working in Firefox. To view an example please download attached files (sorry it's very basic). - Unzip and click on index.html. - Clicking on "Click to load file into div" will load the test.html file into a div of index.html. - Two images will come up. When mousing over the images boxes with text will appear. - Clicking on "Empty Div" will remove contents of div with .empty() - Clicking on "Click to load file into div" will bring in the test.html again but the tweens no longer work. This behaviour only happens when first firing the tweens. If you refresh the browser and click to add and remove the html the tweens will still work the first time. The Tweens work fine in IE9 but are not working in Firefox 20. Does anyone know why the tweens would not work the second time in Firefox? Any help would be great. Thanks test.zip
-
Once again... figured it out... I need to stop being so quick to post. Thanks -
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();
-
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]); }
-
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.
-
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!
-
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!
-
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 )
-
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!
-
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
-
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...
-
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.
-
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.
-
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 ---
-
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
-
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
-
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
-
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
-
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
-
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
-
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!
-
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
