Search the Community

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.

Tweens offers many events to detect actions: onStart, onComplete, onReverseComplete... But there's no onReverseStart How would you detect the animation started in reverse?

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?

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

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

Hello, I saw some animation done with greensock js flavor... http://codepen.io/nrose/details/KrnGq Is this possible with as3 version? How can I create a animation to simulate a flag? Thank you...

Hi, Firstly, let me say a huge thanks to Greensock for providing such amazing tools over the years, I've been using your products since AS2 Tweenlite and they never fail to amaze me with their power and usability...thank you!! I have made a simple fiddle to demo the problem here : http://jsfiddle.net/x0b/cXR7L My situation is this: I want to have a main timeline that has 3 sections - an intro, a changeable middle section and an outro, in that order. Once the user has completed the middle section and the outro, they click a button and a new middle section replaces the current one, the rest remains the same. Once the button is clicked I pause(0) both the outro and middle section to reset their tweens, then kill them both so they get removed from the main timeline (incidentally - remove does not seem to do anything for me as the duration of the main timeline remains the same if I check it after doing remove - is this a correct behaviour?). Then I add the new middle section and the outro back to the timeline. The timeline is controlled by scrolling the output window and runs correctly initially; the green box moves down (intro) the blue box goes left 100px further than the yelow (middle section) and then they come back to their starting positions whilst the red box comes from 1000px to cover the green box (outro). The problems once the button is clicked are two fold 1) The intro runs ok, the new middle section runs ok, but then as soon as the timeline enters the outro, the blue box jumps out to 200px and the yellow box jumps to 100px. I guess this is because the outro tween has for some reason stored these values the first time it is run, even though it was killed. 2) If I invalidate() the outro timeline, the blue box glitch disappears but then the from tween does not work correctly, I presume this is because the invalidate means the timeline has forgotten where the from tween started from? So I'm kind of stuck between two problems and not sure whether I'm using the API wrong or the API can't do what I need. Can anyone please provide some insight? Thanks!

Ok I hoping someone can help me out. I'm relatively new to action script and TweenMax but have learned a lot over the last year. I'm using Flash Professional and I am trying to ease in a map when the map icon is clicked. Once the user is done they click on the map and the map eases out. This is set up by using two external classes names MapToggleOnClass and MapToggleOffClass. I have been successful in doing this from the document class but only partially successful in doing it from an external class. I say partially because I am able to get the ease out function in the MapToggleOffClass to work when the user clicks on the map. However, I have not been able to get the map to ease in when the map icon is clicked. All my symbols are MovieClips. All the instance names are correct and the instances are on the stage. The visibility of the streetMap instance is set to off at runtime. Using a trace statement I know that Flash is detecting when I click on the Map Icon (mapBook) but nothing happens. The symbol StreetMap is linked to the Class of StreetMap and the Base Class of the MapToggleOffClass. The Symbol Map Icon has the instance name of mapBook and has its class linked to the MapToggleOnClass. I know the linkages are correct because of trace statement when I click on the instance of mapBook. The click is registered but the Tween (easeIn) does not occur. The following is my code: package { import com.greensock.*; import com.greensock.easing.*; import com.greensock.TweenMax; import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; public class MapToggleOffClass extends MovieClip { public function MapToggleOffClass() { this.buttonMode = true; this.addEventListener(MouseEvent.CLICK,hideMap); function hideMap(event:MouseEvent):void { trace("movieClip Instance Name = " + event.target.name); TweenMax.to(event.currentTarget, 1, {autoAlpha:0, ease:Back.easeOut}); } } } } and package { import com.greensock.*; import com.greensock.easing.*; import com.greensock.TweenMax; import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import StreetMap; public class MapToggleOnClass extends MovieClip { var streetMap:StreetMap; public function MapToggleOnClass() { streetMap = new StreetMap(); this.buttonMode = true; this.addEventListener(MouseEvent.CLICK,showMap); function showMap(event:MouseEvent):void { trace("The link is working"); TweenMax.to(streetMap, 1, {autoAlpha:1, ease:Back.easeIn}); } } } } The main difference is the easeOut function uses "event.currentTarget" and the easeIn function uses streetMap as the object. One more thing.... in the action script settings I have automatically declare stage instances checked. What am I missing? Any help would be much appreciated. thanks in advance.

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?

Hello everyone This might be a stupid question but i had to ask to better understand the JS API .. I know that when you include TweenLite.min.js in your page that you use the TweenLite constructor when using different methods in the API But lets say If i have TweenMax.min.js INCLUDED in my page: what is the best usage for using set() .. using the TweenLite or the TweenMax Constructor?Its been said in the forums that you can use either TweenLite or TweenMax IF TweenMax.min.js is INCLUDED in your page... so I was curious as far as performance and/or preferred usage.. which is appropriate to use if I have TweenMax.min.js included in my page? or can i use both using TweenLite: TweenLite.set(element, {x:100, y:50, opacity:0}); or using TweenMax: TweenMax.set(element, {x:100, y:50, opacity:0}); or can i use either or ??? Im sure that what Im asking can relate to other methods in the API, when i have TweenMax.min.js included in my page.. so any help will be highly appreciated thanks in advance !

I have an animation that uses the bezier plugin and the autoRotate function within it. After updating to the latest version of GSAP the rotation is no longer occurring, causing the animated element to look unnatural. I haven't run any significant tests as I am pressed for time with other projects but I was just wondering if there is a quick fix on my end. I know there were some updates to how rotation is handled in the latest update and if there is anything I need to do to update my code any assistance would be appreciated. Here is he snippet that makes the path and rotation: {bezier:{type:"soft", curviness:1.25, values:[{x:0, y:-200}, {x:300, y:-400}, {x:800, y:-200}, {x:1010, y:-300}], autoRotate:["x","y","rotation",1.5,true]} I can't provide the link to the source since it's a closed production environment but if it helps I can create a test page somewhere when I get some time. Thanks.

Regards, Recently I am learning to use the GreenSock libraries and now I'm doing the animation of photographs column when clicking on a button that scrolls down. Apply a blur filter to give it a blur on the Y axis and I can not make this return to the original state, I mean, that would slowly diminishes blur filter and stops. I'm using TweenMax to animate with As3, the following piece of code is the one I use to make the animation, and the blur does stop abruptly and do not slowly returning to their original state. I hope I can help. thanks TweenMax.to(column, 2 {y:column.y ease:Quart.easeInOut, blurFilter:{blurX:0, blurY:20, remove:true}});