Search the Community
Showing results for tags 'tweenlite'.
Found 229 results
-
[see "Why can't code be in <head>?" thread as the problem has been pinned down to putting the timeline in the <head> and .play() in the <body>] Been using jQuery animation and am new to GSAP. I created a TimelineLite animation on a standalone page. The page includes all the scripts and style resources used by my live website so I could check for conflicts. It ran fine -- animation was mostly opacity changes. I put the script into my test site. [uPDATE: On the test site I use a JS closure to encapsulate the TimelineLIte animation -- this seems to be the problem]. I see the text and image resources but nothing is animated until it hits the onComplete on the last line. That calls a TweenLite.to() outside the TimeLineLite to fade everything out. I stepped through the GSAP code (min version) on the test site and it seems to be running through all the steps in the animation. For instance, in TimelineLite.min.js the value of "this._totalDuration" is the total length of all the durations and delays added up. In the TweenLite.min.js code the value "e.id" takes on the values of each of my selectors as it loops around. Yet the screen shows nothing happening. I'm using this resources. <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script> Any tips on debugging a problem like this [closure]? Is there a line in TweenLite.min.js I can set a breakpoint on and see what is really going on?
-
Hi there I have a nav that links to slides with tweens in between. The slideshow navigation works fine by loading each slide according to it's position on the list. See the following pen http://codepen.io/mulegoat/pen/ruHhD The problem I'm having is trying to link to a certain slide from within each slide. Using the following code works on all but one "Link to page 2" link - in this case, the link within the first slide - but on my localhost its slide 5 where the link fails. I know this is more of a jquery issue but though I'd put it up here incase somebody had a better way of doing this with getElementById or something else. Many thanks for any help function initActionPlan() { $(".actionPlanLink").each(function(index, element) { $(this).on("click", gotoActionSection); }); } function gotoActionSection(e) { if(currentSectionNum != $(e.currentTarget).index()){ if(currentSection) { TweenLite.to(currentSection, 0.5, {autoAlpha:0}); } currentSection = $(".tabsContainer")[1]; TweenLite.to(currentSection, 0.2, {autoAlpha:1}); } } //OpenClose Action Plan function actionInit(){ initActionPlan(); $(".actionPlanLink")[1].click(); } actionInit();
-
Hi all! I set up a site using TweenMax 1.9.5 for any animation, and everything worked properly. Later, I updated the libraries to 1.9.7 and finally to 1.9.8. With current version, the animations don't work properly; there is a conflict with Addthis dynamically created iframes. Here is a sample code reproducing the problem with a YouTube static iframe: <!DOCTYPE html> <html> <head> <!-- 1.9.6 --> <!-- <script type="text/javascript" src="https://raw.github.com/greensock/GreenSock-JS/f91853a0e9f753c1ae8b6b36172a4d42759296af/src/uncompressed/TweenMax.js"></script>--> <!-- 1.9.7 --> <!-- <script type="text/javascript" src="https://raw.github.com/greensock/GreenSock-JS/7c36c8f249526f687e185caa599a6e39bbed15e9/src/uncompressed/TweenMax.js"></script> --> <script type="text/javascript" src="https://raw.github.com/greensock/GreenSock-JS/ab62042130fa8f6a875b92bd2532d1f39d7a18f4/src/uncompressed/TweenMax.js"></script> <!-- Still the same from february --> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.8/plugins/ScrollToPlugin.min.js"></script> <style type="text/css"> body > div { background-color:green; height:5000px; } </style> </head> <body> <div></div> <iframe width="560" height="315" src="http://www.youtube.com/embed/CZF2o06mlgQ" frameborder="0" allowfullscreen></iframe> <script type="text/javascript"> setTimeout(function(){ // This is to allow the iframe being loaded TweenMax.to(window, 2, { scrollTo: { y: 2500, autoKill:false }, onComplete: function() { alert("end"); } }); },10000); </script> </body> </html> As you can see, an error is thrown in TweenMax.js, line 5700. In that location, "target" is "window" when attempting to scroll it, but window[0] (target[0]) doesn't allow the access to "nodeType" property. In particular, Firefox says "Error: Permission denied to access property 'nodeType'" and Chrome indicates a cross-domain conflict between the current page and the imported in the iframe one. I figure out that this happens because window object also contains the included frames and iframes (http://www.w3schools.com/jsref/obj_window.asp), hence target[0] isn't the "desided" window object, but only the first contained iframe. There should be a window.frames[x], but looks like that window[x] works in the same way (as well as window.length), that is an array of window objects (cross domain or not). Reverting to TweenMax version 1.9.5 (the last working I had on SVN), everything works as expected. In the reported example I also included the commented imports of previous versions, and the last which looks like working is 1.9.6. Moreover, another animation in my pages throws a similar error on native IE8, and looks like 1.9.5 doesn't do the same: I didn't investigate deeply in this, because maybe that fixing the regression will also fix the other trouble. I'll get some time to do it if U wished Thanks in advance for your precious help Massi
-
I'm trying to plug this into my custom framework before I pull the trigger on a commercial licence and I might be asking a super noob question but I have looked through a bit of the documentation and from what I can tell there is no way of manually updating a tween through a external function. bool = true; TweenLite.to(someMC, frameCount, {useFrames:true, updateOnFunction:updateTween, onComplete:tweenComplete}); public function render():void { if(bool) updateTween(); } public function tweenComplete():void { bool = false; } I'm sure I can program some roundabout way to get this to work but I am hoping I am simply blind Xp
-
Hi, Im just getting started and am excited about the prospect of a new door to flash. However, I am stumped right off the bat going through "Getting Started" for Tweenlite. I downloaded TweenLite for AS2. Created a test folder. Put the com folder inside. Created a test fla. I imported the classes as was instructed on the first frame of the timeline: import com.greensock.TweenLite; import com.greensock.*; import com.greensock.easing.*; TweenLite.to(poly_mc, 1.5, {x:100}); I created a polygon called poly_mc, and also named the instance poly_mc. I extended my timeline in the event it needed 1.5 seconds of frames to run the animation. Nothing happened. No errors either. Am I doing something wrong? I'm on Flash CS6, but wouldnt imagine it matters since it's AS libraries.
-
Hi, I would like to create a simple count-up from let's say 0 to 1000. I would also like to control about the time it takes to count up to that number and have a vertical blur effect applied, kind of like in an odometer. Is that possible in AS2? Thanks for any help, Dada
-
Is there any way I can reduce the size of TweenLite's footprint within my Flash banner? On publish, Actionscript 2.0 Classes make up 20K of my 32K banner. I'm not doing anything crazy here, just fading in/out and moving up/down. I tried using TweenNano...file size was GREAT. But I couldn't figure out how to make my banner repeat only two times, since there is no "repeat" or "restart" features like there are in TweenLite. Am I importing something that I don't need? Here's my AS2.0 TweenLite Code: // import the tween engine import com.greensock.*; import com.greensock.easing.*; ////////////////////////////////////////////////////////////////////////// // define the timeline var timeline:TimelineLite = new TimelineLite({onComplete:repeat}); // define repeat function variables var nPlays = 0; var totPlays = 2; // repeat timeline if played less than three times function repeat() { if (nPlays < totPlays) { timeline.restart(); nPlays++; } } ////////////////////////////////////////////////////////////////////////// // get your tween on timeline.appendMultiple([ TweenLite.from(text1, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:.5}), TweenLite.from(text1b, 1, {_alpha:0, _y:"40", ease:Expo.easeOut, delay:.5}), TweenLite.to(text1, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:2.5}), TweenLite.to(bg1, 1, {_alpha:0, ease:Expo.easeOut, delay:2.5}), TweenLite.from(text2, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:3}), TweenLite.to(text2, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:5}), TweenLite.from(text3, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:5.5}), TweenLite.to(text3, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:7.5}), TweenLite.from(text4, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:7.5}), TweenLite.from(stall, 2, {_y:"10", delay:10})]); stop(); Here's my AS2.0 TweenNano code. File size is great, but I can't figure out how to make it repeat only twice. // import the tween engine import com.greensock.*; import com.greensock.easing.*; ////////////////////////////////////////////////////////////////////////// // define repeat function variables var nPlays = 0; var totPlays = 2; // repeat timeline if played less than three times function repeat() { if (nPlays < totPlays) { //initBanner.start(); initBanner(); nPlays++; } } ////////////////////////////////////////////////////////////////////////// function initBanner({onComplete:repeat}) { //the issue is with this line TweenNano.from(text1, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:.5, overwrite:0}); TweenNano.from(text1b, 1, {_alpha:0, _y:"40", ease:Expo.easeOut, delay:.5, overwrite:0}); TweenNano.to(text1, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:2.5, overwrite:0}); TweenNano.to(bg1, 1, {_alpha:0, ease:Expo.easeOut, delay:2.5, overwrite:0}); TweenNano.from(text2, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:3, overwrite:0}); TweenNano.to(text2, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:5, overwrite:0}); TweenNano.from(text3, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:5.5, overwrite:0}); TweenNano.to(text3, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:7.5, overwrite:0}); TweenNano.from(text4, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:7.5, overwrite:0}); TweenNano.from(stall, 2, {_y:"10", delay:10, overwrite:0}); } initBanner(); stop();
-
Hi All, apologies if this has been asked before but it's causing me a headache. I am trying to provide a tween with variables (which are _x & _y coordinates) so here is my code: if (id == 1) { TweenLite.to(newPic,0.5,{_x:xcoordinate1, _y:ycoordinate1, onComplete:showText, ease:Circ.easeOut}); } else if (id == 2) TweenLite.to(newPic,1,{_x:xcoordinate2, _y:ycoordinate2, onComplete:showText, ease:Circ.easeOut}); { Where I know _x:xcoordinate1 are numbers. My problem is that when I run this code and toggle between these two tweens the values of the variables seems to be ADDED each time so that my image is gradually being pushed off the stage rather than toggle between two positions. (If I trace out the variable after each tween they are as expected but clearly the values are being incremented) I want the movieclip newPic to just move between the two points, does this make sense? Many thanks
-
This seems like it should be a no-brainer, but I've searched the API and can't see how to kill a Tween(Max) and force it to complete. I see how to kill ALL tweens and force to complete, or child tweens of a particular object and force them to complete, but for a TweenMax I didn't see the option to force to complete. Could someone point me in the right direction? Thanks!
-
Way to change 'default' tween for TimelineMax convenience methods?
cerulean posted a topic in GSAP (Flash)
I've been making good use of TimelineMax's convenience methods: timeline.to(....), etc. As I understand it, these are syntatic sugar for timeline.add(Tweenlite.to(...)), etc Is there a way to change it so that the convenience methods would instead use TweenMax? Ran into an issue where I was trying to use 'yoyo' but wasn't working…and it's because TweenLite doesn't offer 'yoyo', I believe. I offer it as a suggestion for future releases, if it's not currently implemented. -
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!
-
Hi there. I have a simple animation I'm trying to do using a combo of the colorTransform exposure setting on instance name: bg1_mc. Here is my code: import com.greensock.TweenLite; import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.ColorTransformPlugin; TweenPlugin.activate([ColorTransformPlugin]); TweenLite.to(bg1_mc, 1, {alpha:1, colorTransform:{exposure:1.5}}); TweenLite.to(bg1_mc, .2, {colorTransform:{exposure:1}, delay:1}); TweenLite.to(bg1_mc, .5, {x:726.95, y:0, ease:Circ.easeOut, delay:3}); The first line works if the other two are commented out - but if they are uncommented, that bg1_mc simply doesn't show up. What I'm trying to do is fade in the movieclip set the exposure a little higher, then flash it out back to a normal exposure. Then after 3 seconds slide that movie clip off the stage. What am I doing wrong? (the instance is orig at x:0 y:0 on the stage btw) Thanks!
-
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 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
-
new to TweenLite and AS3. How link multiple mc to the same function
laxbuddha posted a topic in GSAP (Flash)
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.
-
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.
