Search the Community

Hi all! I have some strange error with ie 11 (may be earlier versions too). Here is a simple example of my code: var gfx_obj = {}; gfx_obj.r1 = 1; gfx_obj.r2 = 1; gfx_obj.r3 = 1; gfx_obj.r4 = 1; function appearGFX(num) { TweenLite.to(gfx_obj, 1.2, {["r"+ num]:5, ease: Power3.easeOut}); } appearGFX(1); So this gives me error in IE only (all other modern browsers is OK). Screenshot of error is attached. Any thoughts how to fix it?

i have a little carousel and its not tweening to the full duration. i have the tween time set to '0.5' when you click on the "<" button the first 2 times it works, the 3rd time theres no animation as though the duration is set to '0' same if you click on ">" first 2 times its good, 3rd not tweening. am i setting something up wrong? thanks

Hi guys, Coming back to this forum for some simple trouble ! I have a flexbox layout, which tweens in many ways, and through many efforts GSAP and flexbox work (almost) perfectly together ! Everything works fine in latest Chrome, Firefox and IE (well, some minor border-radius tweening trouble in IE, but... meh). The troublemakers are Safari / Safari iOS / Chrome iOS and buddies, which still need vendor prefixes for flexboxes. As pointed out in this topic, we can set() prefixes in CSS PROPERTIES this way : tl.set($('#myDiv'), {css:{"-webkit-flex":0}}); But how about setting prefixes in a CSS property VALUE ? I have tried things like : tl.set('#myDiv', {css:{display:'-webkit-flex', display:'flex'}}); As I feared, it seems to be considered a duplicate by browsers. Testing various situations, I think only the last instance of 'display' is applied, which seems only logical. Depending on the order, I get my tweens to work on webkit-based browsers, or the others So, the questions are : - is there a way to set display right cross-browser ? - is there a way to do it simply ? xD Cheers to all the GSAP team, you're awesome ! ================================================================================ EDIT : While looking for an answer, I got to : this stackoverflow topic Based on the answers there, I got some workarounds with no tweens : toggling an HTML "flexBox" class with jQuery for instance. .flexBox { display: -webkit-flex; display: -ms-flexbox; display: flex; } function addClassFlex(elem) { elem.addClass('flexBox'); } tl.set('#myDiv', {onComplete:addClassFlex, onCompleteParams:[$('#myDiv')]}); Since I need this to happen at a precise point of my timeline, I got nothing better than this callback yet. Does it sound ok to you guys ? Anything better to propose ? (awful use of callbacks, and I dislike messing with styles in the HTML...)

Hi, probably an easy question for most of you, but I searched a lot and I didn't find anything (english isn't my first language so...) I'm obviously a new user of GSAP and I saw uses of x and y properties used to move an object, is it possible to do it without CSSPlugin? Maybe I should put this question in banner section, because I would like to only use TweenLite.js for banner ads, a matter of very restrictive weight in multiple platforms Ads Exchange campaign. In short, I mostly want to know what I can do with TweenLite.js only. Can we move object like this TweenLite.to(element, duration, {x:200}); ? And last question : Is it better to use .delay() to create a kind of timeline or we can chain tweens in each onComplete for the next one. My test didn't work at all for onComplete but I need a confirm to be sure I didn't made a mistake. Thank you for your attention

Hi everyone ! Hope you are fine. I come to you because I am trying to make a carousel with images fading in / out. I decided to use opacity (maybe it's not the best way to do it) and JS. I succeed to do something with JQuery but the performance were a disaster. Made my browser (chrome) crash. Then I decided to make it with javascript and tried to realise something as light as possible (hard task). But, when I thought my algorithm was good I was in front of 2 problems : 1) I don't succeed to make it infinite (not too hard to do) 2) I have an error during a loop : Cannot tween a null target. I put some console.log everywhere at every stage but impossible to localise the moment where I am sending a null object to TweenLite. Dafuq So, as you will see in my (short) codepen, am I missing something ? I deeply thank you in advance for the time spend on my request.

Dear GSAP developpers, First of all, thanks for your library, which is now the only source of animation for the website I'm coding. Despite all my efforts, I can't find a way to work around my wish to use the same tween in multiple timelines. Yes, I can easily play a Tween and reverse it whenever I want (see the Codepen)... Yes, I can easily create a Timeline for one specific situation... But no, I can't find how to control a tween being played in a timeline from another timeline ! This Codepen's HTML describes what I would like to achieve. The buttons perform as I expect them to, except for the sequence requirement (#hero1, THEN #hero2). Obviously, I would like to use a TimelineLite for each sequence (using delays is not an option if the number of tweens involved increases), to allow the opening/closing of each #hero to be reversed midway if the user decides so. I guess my trouble comes from this (found in FAQ) : Any idea on how to get the behaviour I describe in the codepen's HTML ? [EDIT : I initially came to GSAP to avoid using callbacks, please don't tell me that's the solution :/] [EDIT : I just realized the problem as I put it is easy to solve. What I need is to AVOID at all costs using more than one tween for each object I work on. No problem with maniuplating in any way the tweens I declared, though. This forked codepen doesn't work, due to the funny behaviour when you quickly click on buttons]

Hello! I use GSAP to make infinite animation in the header of http://okcity.pro with TweenLite window.cloudsTween = TweenLite.to(clouds, 100, {'background-position-x': "-1739px", ease: Power0.easeNone, onComplete: window.animateClouds}) But i get 50% cpu usage when i view that page. It is better than with CSS animation and jquery, but still is a lot. Could you suggest a method to speed this infinite animation up?

hi I want to make my div animated like this swf file. but it sound's to me like I can't do so because of my misunderstanding of transformOrigin system. here is my code: js: TweenLite.set("#pageone", {perspective:750}); window.onload = function(){ tweens(); }; function tweens(){ TweenLite.set("#header",{rotationX:180,opacity:0}); TweenLite.to("#header", 2.5,{rotationX:0,opacity:1, transformOrigin:"0px 0px 0px",ease: Elastic.easeOut.config(1, 0.3)}); } html: <body> <div data-role="page" id="pageone"> <header> <div id="header"></div> </header> </div> </body> the tween happens but not as expected.

I'm drawing a large shape using an array of points in a for loop and tweenlite as found at http://www.flashperfection.com/tutorials/Animated-line-drawing-using-TweenLite-in-AS3-22013.html for(var i:uint = 0; i < pointsArray.length; i++){ TweenLite.to(dot2, .05, {x:pointsArray[i].x, y:pointsArray[i].y, delay:i*.05, overwrite:false, onUpdate:updateHandler}); } function updateHandler():void{ lineAnim.graphics.lineTo(dot2.x, dot2.y); lineAnim.graphics.moveTo(dot2.x, dot2.y); } I would like the animation to complete before continuing, but I'm unable to find a way to be notified when the full animation is complete. onComplete does not work as it triggers on the first set of coords. I also tried triggering when i == pointsArray.length but the loop finishes multiple seconds before the animation completes. I would like to avoid using a timer.

Hi everyone, as intro I'll tell you that my job is to make banner, I produce hundreds every month and it's easier in flash as I've no coder formation. Many years ago I discovered GS and it changed my life! I learned the basics of tweenlite and adapted my workflow. But now with firefox blocking flash, followed by chrome (1 september 2015) it isn't a choice anymore, everything must go HTML5... It takes me a lot of time to do it in html5, it's always too heavy (50k in flash, 300 in html5) and everything isn't possible with my knowledge of js (light effects, particles, alpha masks...) But here I am with a big client which has a campaign running this summer and in september, with the news of firefox and chrome they want me to adapt everything, and there's a tint effect. I already adapted the animation, compressed the png with tinyPNG but the background must change color every 1500ms, I've setup an array of colors, i've setup the setInterval, I've read and tried some demos I found here in the forums but my js knowledge is really not enough to know what to do next, tried cache, tried loading filters... nothing works. Is there a cdn for ColorFilter and ColorMatrixFilter? So can someone check my files? The tint code is from line 94 to 114 so not very much Sorry for my english and I must still learn how to use codepen, but I have a campaign to adapt in 3 days so I couln't wait longer to ask for help. Thanks AT_300x250_html5_v2.zip

I'm currently building an animated banner using Canvas. I've got coloured SVG dot graphics set as Image() objects on my canvas. I've been animating the dots on the canvas along x,y paths and I'd like the dots to fade out by the end of their animations... I can't seem to figure out how to animate opacity values in canvas using TweenLite... In fact, I'm not even sure how to animate opacity on the dots at all, even through plain JavaScript.. I haven't been able to find any answers on Google.. Does anyone here know how to achieve this desired effect? (preferably using TweenLite) For context sake, here is a small snippet of the code I'm currently working with: function drawDot() { ctx.drawImage(orDt, orDtObj.x, orDtObj.y); //draw an orange dot in the canvas } function reAnimateDot() //set dot back to it's origin { orDtObj.x = xDotOgn; orDtObj.y = yDotOgn; animateDot(); } function animateDot() { var angle = Math.random()*(Math.PI*2); console.log('>> the angle : '+angle) var radius = 100; //find the end point for our dot var xEnd = orDtObj.x + radius * Math.cos( angle ); var yEnd = orDtObj.y + radius * Math.sin( angle ) ; orDtObj.xEnd = xEnd; orDtObj.yEnd = yEnd; //reDrawUnit is a function that redraws everything during animation (refresh/frame-rate function) TweenLite.to(orDtObj, 2, {x:orDtObj.xEnd, y:orDtObj.yEnd, autoAlpha:0, ease:Quad.easeOut, onUpdate:reDrawUnit, onComplete:reAnimateDot}); }

this is my coding sample: var timeline:TimelineMax = new TimelineMax(); timeline.staggerTo([mc1,mc2,mc3],1,{onComplete:Function}, 1); i want each mc to have a different function. is it possible?

I am getting all of these compile errors when I publish this code in Flash CS6, AS2, Flash Player 6. It works fine if i set the publish settings to Flash Player 9. Is tweenlite compatible with Flash Player 6? What can I do to make this work? I am trying to tween number variables. Heres the code: import com.greensock.*; import com.greensock.easing.*; addTen_mc.buttonMode = true; addTen_mc.useHandCursor = true; var score:Number = 5000; var targetScore:Number = 0; score_mc.score_txt.text = int(score); function showScore(){ trace(score); score_mc.score_txt.text = int(score); } addTen_mc.onRelease = function(){ targetScore+=10000; TweenMax.fromTo(score_mc, 1.2, {alpha:0, scaleX:0, scaleY:0}, {alpha:1, scaleX:2.1, scaleY:2.1, ease:Back.easeOut} ); TweenLite.to(_root, 1, {score:targetScore, onUpdate:showScore, ease:Linear.easeNone});} In flash Player 6 getting these errors: C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\core\SimpleTimeline.as, Line 32 Unexpected 'add' encountered C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\core\SimpleTimeline.as, Line 35 Function name expected C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\core\Animation.as, Line 78 Expected a field name after '.' operator. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\core\Animation.as, Line 145 Expected a field name after '.' operator. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\core\Animation.as, Line 379 Expected a field name after '.' operator. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\plugins\FilterPlugin.as, Line 23 The class or interface 'flash.filters.BitmapFilter' could not be loaded. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\plugins\FilterPlugin.as, Line 32 The class or interface 'flash.filters.BitmapFilter' could not be loaded. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\plugins\FilterPlugin.as, Line 37 The class or interface 'flash.filters.BitmapFilter' could not be loaded. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\plugins\FilterPlugin.as, Line 53 The class or interface 'flash.filters.BlurFilter' could not be loaded. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\plugins\BevelFilterPlugin.as, Line 26 The class or interface 'flash.filters.BevelFilter' could not be loaded. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\plugins\BezierPlugin.as, Line 513 Identifier expected C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\plugins\BezierPlugin.as, Line 517 Unexpected 'add' encountered C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\plugins\BezierPlugin.as, Line 532 Operator '+' must be followed by an operand C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\plugins\BezierPlugin.as, Line 534 ':' expected C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\plugins\BezierPlugin.as, Line 542 Unexpected '}' encountered C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\plugins\BlurFilterPlugin.as, Line 26 The class or interface 'flash.filters.BlurFilter' could not be loaded. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\plugins\ColorMatrixFilterPlugin.as, Line 34 The class or interface 'flash.filters.ColorMatrixFilter' could not be loaded. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\plugins\ColorMatrixFilterPlugin.as, Line 35 The class or interface 'flash.filters.ColorMatrixFilter' could not be loaded. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\plugins\ColorMatrixFilterPlugin.as, Line 61 The class or interface 'flash.filters.ColorMatrixFilter' could not be loaded. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\plugins\DropShadowFilterPlugin.as, Line 26 The class or interface 'flash.filters.DropShadowFilter' could not be loaded. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\plugins\GlowFilterPlugin.as, Line 26 The class or interface 'flash.filters.GlowFilter' could not be loaded. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 27 There is no class or package with the name 'com.greensock.core' found in package 'com.greensock'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 49 There is no method with the name 'super'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 55 There is no method with the name '_addTickListener'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 62 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 84 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 85 There is no property with the name '_delay'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 96 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 98 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 102 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 103 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 104 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 106 There is no property with the name '_time'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 108 There is no property with the name '_duration'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 112 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 119 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 121 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 129 There is no property with the name '_time'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 135 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 136 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 137 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 138 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 163 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 171 There is no property with the name '_onUpdate'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 172 There is no property with the name '_initted'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 180 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 181 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 184 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 187 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 230 There is no property with the name '_time'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 231 There is no property with the name '_duration'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 232 There is no property with the name '_totalTime'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 234 There is no property with the name '_reversed'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 238 There is no property with the name '_duration'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 239 There is no property with the name '_rawPrevTime'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 240 There is no property with the name '_startTime'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 243 There is no property with the name '_tinyNum'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 245 There is no property with the name '_tinyNum'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 249 There is no property with the name '_rawPrevTime'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 253 There is no property with the name '_totalTime'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 255 There is no property with the name '_duration'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 257 There is no property with the name '_reversed'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 260 There is no property with the name '_active'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 261 There is no property with the name '_duration'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 262 There is no property with the name '_rawPrevTime'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 265 There is no property with the name '_rawPrevTime'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 267 There is no property with the name '_initted'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 272 There is no property with the name '_totalTime'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 275 There is no property with the name '_duration'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 296 There is no property with the name '_duration'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 303 There is no property with the name '_duration'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 308 There is no property with the name '_time'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 310 There is no property with the name '_initted'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 312 There is no property with the name '_initted'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 316 There is no property with the name '_time'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 317 There is no property with the name '_time'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 319 There is no property with the name '_time'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 323 There is no property with the name '_active'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 324 There is no property with the name '_active'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 334 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 335 There is no method with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 349 There is no property with the name '_onUpdate'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 350 There is no property with the name '_startTime'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 353 There is no property with the name '_time'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 354 There is no method with the name '_onUpdate'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 358 There is no property with the name '_gc'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 359 There is no property with the name '_onUpdate'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 363 There is no property with the name '_timeline'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 366 There is no property with the name '_active'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 368 There is no property with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 369 There is no method with the name 'vars'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 371 There is no property with the name '_duration'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 372 There is no property with the name '_rawPrevTime'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 437 There is no property with the name '_initted'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 451 There is no property with the name '_onUpdate'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 453 There is no property with the name '_initted'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 459 There is no property with the name '_gc'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 469 There is no method with the name 'super'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 502 There is no property with the name '_rootFrame'. C:\Users\sdennis\Desktop\GreenSock-AS2-master2\src\com\greensock\TweenLite.as, Line 605 There is no property with the name '_gc'.

Hi ! I'd like to know if anyone has already used TweenLite or TimelineLite server-side with Node.js. If not, is there a way to do so ? A GSAP NPM module would be something great. Thx

I am trying out the gsap animation library. According to the basic docs the syntax for getting a tween up and running is: TweenLite.to( [target object], [duration in seconds], [destination values] ) So I have tried a really simple tween based on jQuery's hover event: $('.contact-item').hover(function(){ TweenLite.to(this,4,{background:'#671B4B'}); },function(){ TweenLite.to(this,4,{background:'#FFFFFF'}); }); Oddly, the background does change to the correct color, but it tweens instantly instead of over the course of 4 seconds as I have specified in the second argument. I did check to make sure the default is seconds not milliseconds. It's in the docs I linked to. I did make sure I am using TweenLite and not TweenMax. I am using jQuery but see no conflicts or errors in the console. Any help is appreciated. I have linked to a codepen I have added the css plugin and it is added to the codepen as well.

Hey all, I've got a lovely animation up and running for the site I'm working on, but I would like the mobile animation to run slightly differently. Specifically, I've got a Tween that looks something like this: TweenLite.to(target, 1, { "top": 0 }); Pretty basic stuff. What I'd really like to do is replace "top" with some variable, such as orientation, declared earlier in the code depending on what device and screen size the user is using. That way, I can change the animation slightly based on the users' device/screen size. I'd like to do this in one Tween if possible, because the actual tween itself is much longer, and I love keeping my code as simple and elegant as possible. So that super simple Tween becomes: TweenLite.to(target, 1, { orientation: 0 }); where orientation gets declared some time earlier. Is this possible? I've messed around with declaring it a few different ways, but none of them have worked. Apologies if this is an easy fix that I've been missing, but I've been messing around with this for a while now and haven't found a solution. Thanks in advance!

Hello guys, I'm new here, and i'm trying to make this SVG rotate forever, but it just won't work, i've tried making the time -1 and it still wont work. any suggestions? Thanks. <script> //we'll use a window.onload for simplicity, but typically it is best to use either jQuery's $(document).ready() or $(window).load() or cross-browser event listeners so that you're not limited to one. window.onload = function(){ var logo = document.getElementById("logo"); var tween =TweenLite.to(logo, 5, {rotation:360, transformOrigin:"50% 50%"}); //keywords tween.restart(); } </script>

Hi, I'm trying to do a simple "check" SVG animation. Why when I replace TweenMax with TweenLite, half of the stuff is not working? Do I really need to load a 100KB+ js for this? Let me know. Thank you.

I'm trying to make a simple cube made from 6 divs for the faces and a div to contain it. Seems to work ok at first, but when I apply a tween to the container div it flattens the contents rather than applying transforms to the faces individually. It's hard to explain but you can see what's going on in the codepen here: http://codepen.io/insomniagfx/pen/PqWPRZ/ Is this approach viable, or do I need to rotate all six sides independently to get the effect I'm going for?

I have relatively big SVG that I'm animating with TweenLite - drawSVG. The problem is I can't make it going smoothly - it always being slow and intermittent first 1-2 seconds and proceeding fine on 3-4th second. I've tried adding delays to make it wait until the whole page is loaded, but it doesn't give much difference. Also tried renaming 50% of .style0 classes in SVG into another class and making it non-animated and visible from the beginning - not much difference as well, first 2 second of loading are still laggy. I'm looking for a way to make it smoother without editing SVG itself. I'm using the following code to animate it: jQuery(document).ready(function($){ TweenLite.set(".style0", {visibility:"visible"}); var tl = new TimelineLite(); tl.fromTo(".style0", 4, {drawSVG:0}, {drawSVG:"102%"}, "-=1"); TweenLite.render(); });

I have been working on a 2d/3d transition effect module, and I have been running into some issues integrating with gsap (TweenLite). Most of the Tweens require updating on every $("window").resize() function if they have any media queries. Unfortunately I have been running into issues overwriting TweenLite.to's that involve rotations. A good example of this is a simple "hamburger" icon animation. In the below codepen is a decent example of the issue. If you resize the window while the button is in the X state (or navState = 1) the rotation tween acts as though its stuck in the tween.progress=0 state; http://codepen.io/anon/pen/MwYmVW By changing rotationZ: to rotation: the tween rotation get stuck in the tween.progress=1 state. http://codepen.io/anon/pen/MwYmxa If anyone can shed some light on this issue it would be much appreciated. Thanks, Daniel

I'm trying to get the target to tween/animate to a position relative to the viewport or body (or parent element), rather than relative to the element itself. How can I do this? When I run the following code, it Tweens the element (target) to a position relative to its own starting position. TweenLite.to(target, 0.5, { top: '200px', left: '200px'})

Hi everyone! Pretty simple question here, is there any way to tween a transform-rotate more then 360º. For anyone not super familiar with 3d transforms: Simply put, the limitations of matrix3d means you cant rotate more then 360º by passing values more then 1 or less then -1. Because of this you need to loop from states -1 to 1 if you wish to rotate multiple times. Is there any built in functionality for this? or is there an easy way to loop through the transform rotation? Thanks, Daniel Example of the 360º transforms I have been using: var tiltX = function(x){ return "matrix3d(1,0,0,0" + ",0,"+ Math.cos(x) +","+ -Math.sin(x) + ",0" + ",0," + Math.sin(x) +","+ Math.cos(x) +",0," + "0,0,0,1)"; }; TweenLite.fromTo($(".subdiv"),2, {css:{transform: tiltX(3.1415)}} , {css:{transform: tiltX(-3.14159)}} ); OR TweenLite.fromTo($(".subdiv"),2, {css:{transform:"rotateX(-179.99deg)"}} , {css:{transform:"rotateX(180deg)"}});

Hi, I am now testing my apps on 4k displays as these become more common. Using TweenLite: I am having an issue with the performance of a tween that occurs only when very high res displays are used. I am testing on 2560x1600 with the object in question spanning 2500px wide and 500px height, running on a core i7 high spec machine. The tween is simply a 0.5 second tween to alpha 0 and back again. The fade out is clearly running at around 4 to 6 frames per second. The object that is causing the performanc issue is a wood effect complex vector (as attached). With this layer removed from the animated object performance is perfect. I tried making the vector more simple and using optimise, with some very small improvement but nothng significant. In fact I tried making the vector 6X more complex and it was a little slower but not 6x as much. Anyone any ideas on how to improve this. Thanks Complex_vector.zip

I've just started using AS & TweenLite / TweenMax. But I can't seem to get a blurFilter to apply. I have done this so far, package { //Import what I need to import com.greensock.TweenLite; import com.greensock.easing.Linear; import com.greensock.plugins.BlurFilterPlugin; import com.greensock.plugins.ColorTransformPlugin; import com.greensock.plugins.TweenPlugin; import org.flixel.FlxG; import org.flixel.FlxState; import org.flixel.plugin.photonstorm.FlxSpecialFX; TweenPlugin.activate([blurFilterPlugin]); public class ScreenTwo extends FlxState { private var Bwain:Brain; private var bg1:BackgroundOne; //Active plugins TweenPlugin.activate([blurFilterPlugin, ColorTransformPlugin]); override public function create():void { super.create(); Bwain = new Brain(0,0); bg1 = new BackgroundOne(0,0); FlxG.addPlugin(new FlxSpecialFX); //Here I try to tween it. TweenLite.to(bg1, 3, {blurFilter:{blurX:10, blurY:10}}); TweenLite.to(Bwain, 10,{x:-120, ease:Linear.ease}); add(bg1); add(Bwain); makeRed(); } private function makeRed():void { //TweenMax.to(Bwain,4, {ColorMatrixFilter:{colo } } } When I run it, the Linear tween works fine, but during the duration of the blur tween the program looks frozen and resumes after 3 second.