Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'tweenlite'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. mib32

    CPU Usage

    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?
  2. 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.
  3. 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.
  4. 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
  5. 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}); }
  6. 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?
  7. 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'.
  8. 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
  9. 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.
  10. 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!
  11. 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>
  12. 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.
  13. 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?
  14. 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(); });
  15. 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
  16. 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'})
  17. 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)"}});
  18. 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
  19. 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.
  20. 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();
  21. 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.
  22. 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
  23. 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
  24. 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
  25. Be possible to control from most to least the brightness and contrast a movie with TweenLite using two buttons?
×