Search the Community

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'.

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.

I can create a TweenLite like this: var tl = TweenLite.from( '.box', 1, {opacity:0} ); At this point it automatically plays. How can I get it to not auto-play, but instead "manually" start it at a later time with: tl.play();

Hi, I am newbie to GSAP, I've read the documentaion http://greensock.com/docs/#/HTML5/GSAP/TweenLite/ Here I see the play, pause reverse all the stuffs for tweenlite. So. I am trying to add multiple elements, like doing it in timelinelite. You can check the code pen url(used tweenlite JS not timline). Play, pause, reverse those stuffs work only for the single object tweens, or we can add multiple tweens in the tweenlite. When I try to add another tweens, animation is working but in console is throwing an error says that undefined is a function and duration info is not printing. So, kindly help me, whether am doing the right thing or not.

Hey guys, So i have this element that I want to animate x=50, then when thats done animate x=100. I cant seem to make it work or figure out how people do it. It seems to work if I animate the target, then animate another target, then animate the original target again. In the codepen im animating the .menu-button

Hi, Have very strange behaviour that is not working only in Google Chrome but works in Firefox. I need to make it work in Chrome, can you help me with a hint? I have a cube with only side pages (without top and bottom) - so I have 4 pages and I rotate them for 90 degrees left and right. Here is the the LIVE example (everything is in a page - libraries are taken from CDN, CSS is inline, no images): http://www.cloomo.com/problem How to simulate the error: Start Google Chrome and go to http://www.cloomo.com/problem Go to the Page 3 (it has green background) and you will see that links "Back 2" and "Page 4" are not working and their text can not even beselected with a mouse. You can come to Page 3 by clicking on "Page 2" > "Page 3" or "Left" > "Left" Can you help me to make these links clickable? Is there an error in CSS styles or in GreeSock library? I can not find it. Another question: Is it possible to make it more smooth? Thanks Alex

Hi, My question may sounds a little bit stupid - Is there a way to iterate throgh each item's prop with staggerTo without using too many loops? What i want to implement is somethink like this: $boxes.each(function(i, box){ var $box = jQuery(box); var animation = new TimelineLite({ paused: true }); animation.staggerTo($box, 1, {left: $box.position().left, top: $box.position().top }); this.animation = animation; }); // OR even better: var animation = new TimelineLite({ paused: true }); animation.staggerTo($boxes, 1, {left: $box.position().left, top: $box.position().top }); Any help would be greatly appreciated

Be possible to control from most to least the brightness and contrast a movie with TweenLite using two buttons?

Hey everyone so I know that tweenMax has a onComplete function but I was wondering is there anyway that I can setup a tweenMax or tweenLite function to only run 30 intervals of my stages frames per second then once finished call on the onComplete function? I have a movie clip object that is added to the stage every 0.8 seconds and what i wanted to do was when my character picks up a powerup I wanted to have the movie clip object added to the stage every 0.1 seconds but only for a couple intervals or like say 5 seconds then I wanted to put it back to its original time. Is there anything that the tween engine offers to call on a onComplete function for this?

Greetings everyone! Thank you for taking the time to read my question. I am using TweenLite and TimelineLite to create an animation timeline that simulates a user navigating a set of "sections". When the user clicks a button, I create a tween that animates a percent value over the course of 0.3 seconds. On "update" of this tween, the "progress" of my timeline is set using TimelineLite.progress(x). My issue is that if one of the sections is tweened for another reason to a different position on screen, when the timeline is progressed, the section immediately snaps back to where the timeline wants it, based on the original creation. What I would like is that the position of the section would tween from it's new, updated position, to the endpoint defined in the timeline. Is this possible? Here is some pseudo-code that should help illustrate my question. var percentObj = { current: 0 }; var myTimeline = new TimelineLite(); // ---------- // Set starting positions myTimeline.add( TweenLite.set($('#section1'), { 'css': { 'y': 0 } }), TweenLite.set($('#section2'), { 'css': { 'y': 1000 } }), TweenLite.set($('#section3'), { 'css': { 'y': 1000 } }) ); // ---------- // Now that starting values are set, // pause the timeline myTimeline.pause(); // ---------- // Create future animations that // will be triggered by the user // Animate to section2 myTimeline.add( TweenLite.to($('#section2', 1, { 'css': { 'y': 0 }, 'ease': 'Power1.easeInOut' }) ); // Animate to section3 myTimeline.add( TweenLite.to($('#section3', 1, { 'css': { 'y': 0 }, 'ease': 'Power1.easeInOut' }) ); // ==================== function buttonClick() { TweenLite.to(percentObj, 0.3, { 'current': 0.5, 'onUpdate': updateProgress } } function updateProgress() { myTimeline.progress(percentObj.current); }

Hi I am theme developer in ThemeForest and I use GSAP for my theme, more exactly I use TweenMax because of advanced functionality it offers, however the problem is that when user purchase my theme, they include some sort of plugins, which in this case one of them uses TweenLite library, so its conflict error and GreenSock gives me this error: http://cl.ly/ZTax So, what is the best solution in this case, I must use TweenMax, while other plugins may include or not TweenLite as well. Thank you very much

Hi, I'm struggling to get a basicTweenLight example to work in FlashBuilder. Below is a photo of my code. Notice that I have the 'com' folder in the project folder. Notice the errors I'm getting. Any advice would be appreciated.