Search the Community

I was wondering if anyone could help me with an issue involving TweenMax and Easeljs. We're nearing completion of a game built in EaselJS, and just in the device testing phase. We're finding on some lower end devices, such as the iPhone 4 (iOS7), that whenever the framerate drops from our standard of 24 to around 18 or less, any TweenMax tweens currently running will appear to run at an incredibly low framerate compared to anything else. Other non-tweened movements will continue as you would expect at the framerate drop, but we'll only see as little as three frames in any one TweenMax tween - the start properties, maybe one or two frames somewhere in the middle, and eventually the end properties applied to the object, and that's about it. Very odd. It makes it look like the game is struggling much more than it actually is, as everything not tweened is often running at a reasonable rate. Originally we added an event listener to TweenMax's ticker, telling it to update the canvas on tick but this resulted in a lot of performance issues, as it was trying to update the canvas more often than it needed to. So now we just update the canvas on the EaselJS ticker update. I've since tried setting the TweenMax ticker's fps property to whatever the current easel framerate is, and this is adjusted each frame. This generally improves the animation speed of the tweens quite a bit, but they're still not updating as smoothly as any other animations we have playing on screen during these slightly more intensive moments. The canvas is continuing to update fine, so it seems to be that TweenMax isn't updating the values as frequently as it should be. Does anyone have any idea what might be happening? Is there a relatively easy way to manually update the progress of the tweens, so that the canvas ticker and the TweenMax ticker can be properly synced? Thank you

So i'm currently working on a page that has animation when you scroll down the page using scrollmagic and tweenmax. I've pinned the appropriate sections and created the animation, and everything works perfectly. I then added some javascript to have a show/hide function for the different features in a sticky nav (instead of having a long vertical scrolling page, it swaps out content within the same area). I noticed a very weird bug when I switch between the different sections. Here's a screenshot of what the bug looks like when I go back to the original section with the animation. It seems as though the tweenmax plugin is ignoring all of my css and completely breaks. What's even weirder is that when you start to scroll down the css is restored. Any ideas on what this is? I can't seem to figure out what's causing it.

Hi, thank you team greensock for the terrific work you're doing! I'm a big fan of your engine and your support! In my project I'd like to go forth and back on the timeline of a movieclip (which has a bitmap on each frame) while scrolling with my mouse wheel. For that I am creating a frames-based tweenMax and adding it to an also frames-based timelineMax. Then I am using the "tweenTo" method to go forwards or backwards on the timelineMax according to the values I create while scrolling. Tweening forwards seems to work, but it wouldn't tween back when the value decreases again. I attached a demo file with a simple rectangle moving to the side, instead of the bitmaps, on each frame. As you might have noticed I am quite new to actionscript, so I am really happy if anyone would like to give me a hint. Greetings from Germany elsa DEMO.zip

After updating from 12.0.16 to 12.1.1 (including 12.1) - updateTo no longer works.. First call for the tween uses this (which still works): tweenMap = new TweenMax(grid, 0.001, { tx: newX, ty: newY, onComplete: grid.donePanning, ease: Quad.easeInOut }); repeated calls (dragging) then use this (which no longer works): tweenMap.updateTo({ tx: newX, ty: newY, onComplete: grid.donePanning, ease: Quad.easeInOut }); Reverting back to 12.0.16 everything works ok. Looking at the change diff - there are a number of updates in 12.1. Any idea what might be the underlying issue?

Hi, I have multiple small timelines added into a main timeline. And main timeline is controlled by a slider control and play pause buttons. The small timelines can be a text animation with a read time wait, or an image animation. This is my set up for text + image animation screen. I want to add a timeline to main timeline of an animation which keeps on repeating itself for the wait read time of a text animation timeline. Is there anyway to repeat an animation or play an animation in a loop for X amount of time (in seconds)? Thanx.

Hi I love GreenSock tools, they're a first class complement to HTML5. I've just renewed my subscription and am in the process of understanding how TweenMax works with RequireJS. Through perseverance I've got TweenMax working, but I'm a bit unsure if my workflow is correct. I've read various posts that seem to confuse my understanding, perhaps as they may be out of date. It would be great if Greensock or community could post an up-to-date tutorial on how TweenMax and it's Plugins work with RequireJS and some clear examples. What I find confusing is based on various areas (and the following questions are based from other posts on sites/forums perhaps now out of date). So with TweenMax v 1.11.6 and RequireJS v 2.1.11 (latest downloads at the time of writing): Do we still need a GreensockAMDPath? Why define window.GreenSockGlobals? (Is this best practice with RequireJS). My understanding of RequireJS is that we benefit from avoiding the global namespace. Are we still expected to use a 'shim' in the RequireJS config object to get TweenMax working? How are TweenMax plug-ins added with RequireJS. Is the latest TweenMax AMD? I have a feeling that there could be quite a few others asking similar questions. If anyone in the GreenSock community can help then I (and am sure others) look forward to reading your posts. Many thanks in advance for any help / examples...

I am using TweenMax with Adobe Edge Animate, and I am trying to rotate a div to zero degrees from various starting points. If I set rotation equal to any positive or negative number, the div will rotate to that value. However, if I set rotation equal to 0, the div will not rotate at all. Is there a secret to this that I am missing? Here is a sample where photo1 is the div. It is a photo that is on the screen and initially at a -24deg rotation. I want it to move to the coordinates listed while rotating to 0deg. TweenMax.to(photo1, 1, {top:215, left:240, rotation:0, ease:Power1.easeInOut}); Any suggestions will be greatly appreciated. Thanks! Fred

Hi, I am facing a problem with controling the frames with audio in its timeline using TweenMax. Frames are playing perfectly but audio is not playing. If i try to play the swf normally using swf.play(); it works fine. Any clue why it might be happening??

Hi there. This question isn't limited to Greensock but was hoping I could get a little help here. I have an image scroller that basically uses buttons to relatively position a movieclip containing a horizontal line of images. There is a mask over an area so that when you click a left or right arrow, it relatively positions the movieclip under the mask and reveals a section of the movieclip. I have this working fine, however the one functionality I'd like to add, is when the left or right border of the movieclip is reached, the appropriate button is disabled so that the movieclip isn't positioned outside of the mask. Or it loops back to the starting x position. Here is the code: import flash.display.MovieClip; import flash.events.MouseEvent; import com.greensock.*; import com.greensock.easing.*; function init():void { TweenLite.to(products_mc, 1, {x:696, alpha:1}); } init(); function productsLeft(events:MouseEvent):void { TweenLite.to(products_mc, .75, {x:"-255"}); } function productsRight(events:MouseEvent):void { TweenLite.to(products_mc, .75, {x:"255"}); } arrowL_btn.buttonMode = true; arrowL_btn.addEventListener(MouseEvent.CLICK, productsLeft); arrowR_btn.buttonMode = true; arrowR_btn.addEventListener(MouseEvent.CLICK, productsRight); if (products_mc.x == 696) { arrowR_btn.visible = false; arrowR_btn.buttonMode = false; } if (products_mc.x == -1086) { arrowL_btn.visible = false; arrowL_btn.buttonMode = false; } /* buttons */ arrowL_btn.doubleClickEnabled = true; arrowR_btn.doubleClickEnabled = true; arrowL_btn.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler, false); arrowR_btn.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler, false); function doubleClickHandler(evt:MouseEvent):void { evt.stopPropagation(); }

Hello.. Is anyone else seeing this error in the console.. when trying to declare a new instance of TimelineMax() from the Tweenmax 1.11.5 CDN?? I see this happening, just for a simple tween test: http://codepen.io/jonathan/pen/eankc/ I get the following error in codepen and even locally for some reason: TypeError: this is undefined https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js Line 16 Thanks in advance to any who reply back **UPDATE** Its so weird.. now like 1 hour later and i don't see the error anymore, but the animation runs now... so weird ! I guess something was going on with the CDN... i guess whatever it was, its working again.. codepen might have been the issue too .. sorry

Hi there, i'm trying to do a basic animation for a button and it's not working when i put my code on my website. Here's the CodePen page(it works here): http://codepen.io/anon/pen/KnfLk When i drop that code in my website i get this: Nothing happens basically, and even the console.info doesn't work.

Hi, i have a foot illustration and basically i want to click and drag foot object it's drags according to my movieclip point's x and y values. But when foot movieclip instructor animation played then i click the foot object it's position broken. I know i didn't explain clearly. Sorry my english. Here is below my source files. When you can see swf i hope you will understand, what i am trying to say. source file : https://dl.dropboxusercontent.com/u/54591390/shoot_cursor.fla

I am trying to write a function that plays an animation when a link is clicked and then opens the link... so that I can play transitional animations between pages... This is my code, but I can't get the page to load after the animation: var tweenBtn = document.getElementById("one"); tweenBtn.onclick = function(event) { event.preventDefault(); tl.reverse(2.2); window.location.href = "POWERservices.html"; }; Is there a way I can add onComplete to my timeline that has just played in reverse? Or is there a better way of doing this?

What's a better way to make a sequence like this shown here, but utilizing timelinemax? TweenMax.to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2, repeat:3, repeatDelay:1, delay:1}); TweenMax.to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1, repeat:3, repeatDelay:1.25, delay:1.25}); TweenMax.to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3, repeat:3, repeatDelay:1.1, delay:1.1}); TweenMax.to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1, repeat:3, repeatDelay:1.35, delay:1.35}); TweenMax.to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2, repeat:3, repeatDelay:1, delay:1}); TweenMax.to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1, repeat:3, repeatDelay:1.25, delay:1.25}); TweenMax.to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4, repeat:3, repeatDelay:1.2, delay:1.2}); TweenMax.to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1, repeat:3, repeatDelay:1.37, delay:1.37}); After this series completes further animation will resume'.

So I was trying to find a nice way to make a lot of automatic tweens (for lack of a better term) and I found the bubble example from snorkl (http://www.snorkl.tv/2010/12/timelinemax-bubbles-play-pause-and-rewind-particle-systems/) I used his code and modified it to better fit my needs (took out a lot of the randomness and the buttons) but now the clips won't tween. They are placed on the screen, but don't move at all. Also, I already had my own randomRange function defined elsewhere in my project. Heres the code: import com.greensock.*; import com.greensock.easing.*; var tl:TimelineMax=new TimelineMax({paused:true,onComplete:done}); function createWords() { //create a word (attach symbol in library with Class Bubble) and position on stage var word:words = new words(); word.y=500; word.x=randomRange(100,400); word.alpha=1; addChild(word); //create timeline for each word var nestedTl:TimelineMax = new TimelineMax(); nestedTl.insert(TweenMax.to(word,17, {y:-50, ease:Linear.easeNone})); //append new timeline very close to when the previous one started //don't even ask about the offset...k? tl.append(nestedTl, 6); } function done() { trace("the party's over"); } function init() { for (var count:Number = 0; count<50; count++) { createWords(); } } init(); WordTest.fla.zip

I'm getting an error that I'm not understanding. I'm trying to animate a kinetic line, however, the line is not animating and I'm getting the following error: TypeError: s.charAt is not a function TweenMax.min.js: 16 Why am I getting this error? I've attached my javascript file. script.txt

I just found out today that there was this "startAt" parameter that finally solves my problem with constantly setting starting values for properties. Unfortunately, it doesn't seem to work as expected when there are delays. Maybe I'm going about this the wrong way. Example: TweenMax.to(mc, 0.6, { scaleX:1, scaleY:1, delay:0.7, startAt:{scaleX:0,scaleY:0}, ease:Elastic.easeOut }); There is a 0.7 delay there. I would expect the startAt parameters to be used right away, not after the delay. Does this make sense? Is there an alternate way to do this? Otherwise I'm stuck setting the start property values like I always do. ie: mc.scaleX = mc.scaleY = 0; TweenMax.to(mc, 0.6, { scaleX:1, scaleY:1, delay:0.7, ease:Elastic.easeOut }); thanks, rb

I'm trying to randomize some settings in a tween. The first time it gets random values, but each iteration thereafter is identical. function RandomTween(e,o,w,h){ TweenMax.to(e, 0, {x:(int(o.left*w)), y:(int(o.top*h)),rotation:getRandomArbitary(1.05,6.25)+"rad"}); TweenMax.to(e, getRandomArbitary(0.5,5), {y: o.animation.to.y*h,repeat:-1,x: o.animation.to.x*w,force3D:true, rotation:getRandomArbitary(1.05,6.25)+"rad",ease:Linear.easeNone,onComplete:function(e,o,w,h){ RandomTween(e,o,w,h); },onCompleteParams:[e,o,w,h]}); } /** * Returns a random number between min and max */ function getRandomArbitary (min, max) { return random() * (max - min) + min; } var seed = 1; function random() { var x = Math.sin(seed++) * 10000; return x - Math.floor(x); } Am I missing something here?

Im pretty new to tweenmax, and i was wondering how to create an mouseover effect like seen on this page (hover over the images) : http://www.fcinq.com/ (scroll down to the work) They are using this in the css: transform: scale(0.25, 0.1); transition: background 0.3s linear 0s, transform 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s; and on the hover: transform: scale(0.7); transition-delay: 0.2s; However, I have no idea how to do this in TweenMax?

Hi, i'm working on a site using SuperScrollorama. My site has 6 big png-24 + alpha that are animated like this: // slide0 controller.addTween( '#slide0', (new TimelineLite()) .append([ TweenMax.fromTo( $('#sprite1'), 1, {css:{left:50+"%", top:170, scaleX:1.0, scaleY:1.0}}, {css:{left:30+"%", top:150, scaleX:1.2, scaleY:1.2}, ease:Quad.easeInOut}), TweenMax.fromTo( $('#sprite2'), 2, {css:{left:80+"%", top:230, scaleX:1.0, scaleY:1.0}}, {css:{left:50+"%", top:230, scaleX:1.1, scaleY:1.1}, ease:Quad.easeInOut}) ]), 0, // scroll duration of tween 0 ); On my computer, it's fast and fluid (perfect on IE 11 and Firefox, slower on Google Chrome). But on my iPad 2, it's a disaster : very very slow !! I tried with png 8, 256 colors + transparency. It's a little bit better. I tried the Superscrollorama on the iPad, and i noticed that's it's not very smooth. So my questions : - is it a processor problem / graphic card problem? - how to get perfect smoothness on iPad? Does anyone has a website example that i can test? Thanks for any help.

Hello, I am consecutively rotation a series of object on the stage and I am initializing them by setting their rotationY to -65 and then rotationY to zero. The problem I am having is that objects from left to right are not starting from the same rotationY position. Some look to be less rotated than others. The interesting part is that from right to left the rotation lenses as if they are all in some sort of unified perspective. Can anyone please shed some light into this? Thank you in advance.

I'm making the switch from Flash to GSAP HTML5 animation and want to really make sure I'm doing this the best way. Right within my html doc I have a series of animation that utilize TimelineMax so that I may loop the entire set of animations. I have a few questions about these. First of all here is the code: <script> window.onload = function(){ var tl = new TimelineMax({repeat:2, repeatDelay:3}); tl.add( TweenLite.to(container, 1, {autoAlpha:1, ease:Quad.easeIn}) ); tl.add( TweenLite.to(my_films, 1, {width:177, height:44, alpha:1, ease:Power1.easeIn}) ); tl.add( TweenLite.from(season2, 1.5, {alpha:0}) ); tl.add( TweenLite.to(grantland, .5, {x:19, alpha:1}) ); tl.add( TweenLite.to(packshot, 2, {alpha:1, ease:Power4.easeIn}) ); tl.add( TweenLite.to(holiday, 1, {alpha:1}) ); tl.add( TweenLite.to(starts, .75, {alpha:1}) ); tl.add( TweenLite.to(buy, .5, {alpha:1, top:142, ease:Back.easeOut}) ); } </script> Is there a more optimized way to load these? I know that window.onload = function(){ isn't the best way - I heard that document.ready could be a good way but having a hard time getting that work. Further more I can probably scrap the TweenLite reference all together and just use tl.to, is that correct? Also right now I'm pulling in the entire TweenMax library in this manner: <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script Is there a way to only load the select things that I need and therefore save on file size? Please advise. Apologies for the noob questions! Thanks in advance for any help!

The two tweens below fade in a group of divs, but the problem is each fades in with more time between the last as it progresses (almost like it's exponentially slowing). And both tweens below fade in the first two divs at the exact same time with no stagger (hence "faking" it with the delay on the second). Any idea why? How can I get a group of divs with the same class to fade in, one by one, with the same uniform delay between the first two and the rest? Thanks in advance! /* this one doesn't work in a linear fashion */ TweenMax.staggerFromTo($("#overlayFrame"+nextFrame+ " .hotSpot"), 1.5,{opacity:0},{opacity:1},2); /* this one doesn't work in a linear fashion */ var tl = new TimelineMax() tl.add(TweenLite.to($(".courthouse"), 1, {opacity:1})); tl.add(TweenLite.to($(".hospital"), 1, {opacity:1,delay:1})); tl.add(TweenLite.to($(".jail"), 1, {opacity:1})); tl.add(TweenLite.to($(".park"), 1, {opacity:1})); tl.add(TweenLite.to($(".cafe"), 1, {opacity:1}));

Hi guys, I was wondering if is possible use the LoaderMax to load a video, than get this content and send it to a another video player, like the FLV Playback from flash. How can I do that? It's possible? Tnx a lot

Greetings one and all. Hopefully Christmas brought your family together. Thank you in advance. I have a need to update a dynamic text box when a new label is reached. The animation is a sequence of lines drawn, points reached and then the point animated, and an image faded. This all works quite nicely - Jack, your packages are _amazing_!! What I would like to do is as best I can explain: as each label is reached, a dynamic text box is updated with new text. On each new label created, would an "onStart" be apropos? And ... how would I populate the box? I've built dynamic text boxes that are stacked upon each other and when a new label reached, the old text box is alpha-faded out & the new is alpha-faded in. That seems wasteful and is certainly inelegant. My SWF is large, at 51 labels and with unrelated animation and content, but I've trimmed it down to 4 labels in the code below. Any help will be appreciated. import com.greensock.*; import com.greensock.plugins.*; import com.greensock.easing.*; import com.greensock.loading.*; import com.greensock.events.LoaderEvent; mc_ball.x = P1.x; mc_ball.y = P1.y; mc_map_uk.alpha = 0; var line:Shape = new Shape(); addChild(line); // timing variables ///////////////////////////////////////// var timer_tweek:Number = .8; var staticTimer_var:Number = 4; var image_fade_var:Number = .01; var point_bounce_var:Number = 3; ///////////////////////////////////////////////////////////// drawRoute(); function drawRoute () { var tl_drawRoute:TimelineMax = new TimelineMax(); ///////////////////////////////////////////////////////////// // add each line tween and label the insert point // draw using same time for each tween: tl_drawRoute.to(mc_ball, staticTimer_var, {x:P2.x, y:P2.y, ease:Linear.easeNone, onUpdate:drawLine}, "point_1"); tl_drawRoute.to(mc_ball, staticTimer_var, {x:P3.x, y:P3.y, ease:Linear.easeNone, onUpdate:drawLine}, "point_2"); tl_drawRoute.to(mc_ball, staticTimer_var, {x:P4.x, y:P4.y, ease:Linear.easeNone, onUpdate:drawLine}, "point_3"); tl_drawRoute.to(mc_ball, staticTimer_var, {x:P5.x, y:P5.y, ease:Linear.easeNone, onUpdate:drawLine}, "point_4"); ///////////////////////////////////////////////////////////// line.graphics.clear(); line.graphics.lineStyle(3, 0xFF0000); line.graphics.moveTo(mc_ball.x, mc_ball.y); ///////////////////////////////////////////////////////////// // insert dot tweens at the appropriate label // each tween has the same duration and will start when it's respective line tween starts tl_drawRoute.insert( TweenMax.fromTo(P1, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_1"); tl_drawRoute.insert( TweenMax.fromTo(P2, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_2"); tl_drawRoute.insert( TweenMax.fromTo(P3, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_3"); tl_drawRoute.insert( TweenMax.fromTo(P4, point_bounce_var, {scaleX:0, scaleY:0}, {scaleX:1, scaleY:1, ease:Elastic.easeOut}), "point_4"); ///////////////////////////////////////////////////////////// // image fades called at apporpriate label tl_drawRoute.insert( TweenMax.fromTo(I1, image_fade_var, {alpha:0}, {alpha:1, ease:Elastic.easeOut}), "point_1"); tl_drawRoute.insert( TweenMax.fromTo(I2, image_fade_var, {alpha:0}, {alpha:1, ease:Elastic.easeOut}), "point_2"); tl_drawRoute.insert( TweenMax.fromTo(I3, image_fade_var, {alpha:0}, {alpha:1, ease:Elastic.easeOut}), "point_3"); tl_drawRoute.insert( TweenMax.fromTo(I4, image_fade_var, {alpha:0}, {alpha:1, ease:Elastic.easeOut}), "point_4"); } function drawLine() { // trace("drawLine called"); } function testComplete () { // trace("test complete"); } Best, Steve