Rob

Hey guys thanks for your time, My project is a 20 minute animated story with SVG. The performance is definitely noticeable, I have > 1000 objects hidden at one time. The story is split up into chapters and scenes. I have a staging area which has display: none where chapters that are not playing are off screen and being display: none do not consume drawing calls in the browser. The individual objects naturally inherit this display property and are not drawn. Without display none on hidden chapters, there's well over 1000 individual objects being drawn. Chrome chews up ~250% CPU on my i7 Mac and heats it up well. On mobile framerate suffers considerably on medium spec hardware. I have delayed setting display:none on the staging area until after initialisation and all tweens have been configured and all is well, I have the performance benefits of only rendering the objects required and all the tweens were configured during initialization/loading. Thanks Rob

Hey. (Topic could be misleading, this only refers to elements that are initially display: none) I'm using display none to reduce CPU usage on a complicated scene for elements that are no longer in the scene rather than using visibility. However using display none breaks some of my from tweens that tween transform where the object has a default transform for example scale. Here's an example http://jsbin.com/refuquy/edit?html,css,js,output The red box has normal display The green box has transform: scale(3) and normal display, on x tween the transform takes into account the scale(3) The blue box has transform: scale(3) but his initially display none, it loses the initial transform scale(3) upon x transform The yellow/orange box, to illustrate this is just a "from" issue, this box is initially display none but it retains the scale(3) upon x transform Is this a bug or just behaviour I need to anticipate? Hope that makes sense. Thanks

Thanks for your input guys. Appreciate it, I went with a function based approach to setting the values based on the progress of the tween. Thanks

Hey all, I've have a look in previous threads re: changing target values of a tween in progress. It seems like it's accepted that you can't. At least not by some some convenient method like tween.updateValues(x: new_target_x, y: new_target_y) In my example you'll see I have nodes (circles) that move around the screen. What I want to do is draw a line tween two of the moving nodes. This is easy right. But I want to tween the line drawing so that instead of instantly drawing completely, I want it to grow from the origin node. The problem I have here is that the destination node is constantly moving. I'm not 100% but it feels like i'd on every update I'd need to store the progress of the tween that's animating the line drawing from origin -> destination, kill that, then recreate the same tween but with the new destination values starting, setting the the starting progress the progress we stored from the previous tween. This feels like huge waste of resource, tearing down a tween and creating another every frame. Anyone got any suggestions? Thanks for your time. Rob

Hey guys, I'm using TweenLite's ticker to provide my game with a loop I can use for updating the physics. To make my game framerate independent I need the delta time (DT). The docs suggest the callback receives event which I thought might include the DT, however the event is undefined. I can calculate the delta time myself however I was hoping it would be available. For now I can do this... var previous_time = 0, current_time, dt = 0; TweenLite.ticker.addEventListener("tick", function() { previous_time = current_time current_time = TweenLite.ticker.time dt = (current_time - previous_time) * 1000 game.tick(dt) });

Hey Jack, Excellent this is great to hear GSAP considering harnessing acceleration by default. I'm slightly concerned that there are some issues with particularly chrome at the moment as you mention with I reported it to the Chromium team ,but it's not gaining much traction at the moment. http://crbug.com/425747 This is a particular issue when using "retina ready" images and scaling. There are a few workarounds suggested in my earlier thread http://greensock.com/forums/topic/10758-accelerated-scale-animations-do-not-repaint-after-tween/, so i guess not necessarily a blocker for this change. Personally I'd like to see the default as "auto" to mitigate the aforementioned issue.

Hey guys, thanks for the information. The reason I want 3d enabled for the transform is to give the extra boost to performance, the scale is noticeably jerky without it I'm guessing due to lack of acceleration on 2d transforms. I'm going to try your suggested workaround by scaling from having my end state as the default. The bug you mention is about css animations. As per my examples css animations are fine now. Possibly in the process of fixing that they seems to have broken javascript animations somewhere along the line. That bug claimes to have been fixed and merged in may and from my CSS transform example that appears to be true. I've opened a new issue specifically about JavaScript tweens being broken now in the latest canary 40. https://code.google.com/p/chromium/issues/detail?id=425747 Thanks for your help as always.

I'm using a scale transform, when accelerated using the force3D property the elements are not repainted correct at the end of the animation. I believe this is a chrome/blink bug but I wanted to see if anyone had anything to share on the matter here. The issue can be see here: http://jsbin.com/qehuna Using a non-accelerated tween is fine: http://jsbin.com/sureza Accelerated CSS transitions are fine: http://jsbin.com/fomuno As a workaround I've discovered that adding a small non-accelerated transform after the main tween removes the elements from a composite layer and triggers a repaint: http://jsbin.com/vezaxa This issue is not present in Firefox

Thanks Carl, I saw that after I posted mine. Sorry for the duplication.

Cool thanks guys. I did try $(target).css('width') but that always returns a px value. I recall that element.style.width will not always return the value exactly as it was set in IE. However I've just tried it and it seems OK. So I'll stick with using the style object then. Thanks for your input guys.

Hey guys. I'm doing a simple tween on a score bar which tweens the width of a div from 0% to 0-100% depending on the users score in a game. I want to play a sound when the bar animates and passes various points. I'm struggling to get the % value back out of my tween instance during the onUpdate callback. tween.target is an array containing my div. I can call: onUpdate: function() { # get a numeric percentage value val = parseFloat(this.target[0].style.width) if(val > 0 && !played_one) { soundManager.play('sfx','score_1'); played_one = true; } else if(val > 50&& !played_two) { soundManager.play('sfx','score_2'); played_two = true; } else if(val > 90 && !played_three) { soundManager.play('sfx','score_3') played_three = true; } } This solution isn't the most elegant I know. But something really doesn't feel right about "this.target[0].style.width" I'm not 100% that this is going to give me the current percentage value correctly in all browsers. I thought there might be a GSAP to give me this value reliably.

Hey guys, firstly, thanks for your replies, really appreciate you taking the time to help with this, as I totally agree, it's not really a GSAP issue. However you guys are very knowledgable so was hoping this was something that's come up for someone else. The icon im scaling is part of a game UI. The game is written mostly in javascript with canvas. However some of the UI components are DOM. This particular item I'm scaling is a DIV. It has some other elements inside, but essentially it's a DIV, the visual that i'm scaling which you're looking at in the video is just a DIV with a background-image. The element is placed over the top of the game running in the canvas underneath. I'm sorry I should have made a live example, the specific code is deep within my game code so I'll try to extract it and recreate the issue in isolation on codepen. Thanks again Rob

Hi guys, I have a simple tween that tweens the opacity and scale of an element. It's made up of a number of child divs, some with with background images TweenLite.fromTo(elm, 1, { scale: 0, opacity: 0 }, { delay: delay, scale: 1, opacity: 1, ease: Power4.easeInOut } ); Here's a video showing the problem. https://plus.google.com/photos/117519930315665299724/albums/6016203100500855073/6016203101346895106?pid=6016203101346895106&oid=117519930315665299724&authkey=CNaF7OT_gJGA1QE @0:01 - The above tween is run @0:04 - I run another tween which just returns the scale and opacity to 0 @0:10 - I set the elements display property to none @0:15 - I set the elements display property to block @0:19 - Tween scale and opacity to 0 @0:23 - Tween scale and opacity to 1 So at @0:15 it's rendered correctly. but again @0:23 is not again. I assume this is actually a browser issue, it doesn't think i needs to redraw the element after the scaling. The odd thing is though that if I only ever scale from .5 instead of 0 then there are no rendering issues. TweenLite.fromTo(@elm, 1, { scale: .5, opacity: 0 }, { delay: delay, scale: 1, opacity: 1, ease: Power4.easeInOut } ); (it's all fine on chrome desktop)

Seem's it's a chrome only issue, firefox seems good. Must be a chrome bug. Will try using blur and focus instead, thanks rhernando

Hi Jack, Unfortunately, that doesn't fix it. Heres an updated fiddle with RAF turned off http://jsfiddle.net/robaldred/XHQqp/ Still doesn't seem keep time correctly