Jump to content

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


  • Posts

  • Joined

  • Last visited

Everything posted by Rob

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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) });
  6. 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.
  7. 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.
  8. 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
  9. Thanks Carl, I saw that after I posted mine. Sorry for the duplication.
  10. 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.
  11. 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.
  12. 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
  13. 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)
  14. 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
  15. 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
  16. Hi Guys, The Timelines and delayedCalls method seems to forget time if they are paused when using the visibility API, when a tab loses visibility i'm setting the tween's timescale to 0 and pausing the audio. The audio play calls are trigger on a Timeline, I'm then using delayedCall to stop the audio after a certain duration. I have setup an example here http://jsfiddle.net/robaldred/nj9pY/ (requires sound& used fiddle because i needed to link multiple externals and don't have pen pro) On load, sound will play through nicely. All timelines and delayed calls work as expected. However if you switch to another tab for 30 seconds or so at some point during a playing clip. When when you return to the tab it really screws up the timeline and the delayedCall, it's like the play head jumps forward when setting timeScale back to 1. This only appears to happen when using visibility API callbacks. Something to do with RAF not being called when a tab is hidden? Any thoughts? Appreciate your time. Rob
  17. Thanks for the info however in this case, there's no change, from value is still ignored. You can see this here: http://codepen.io/raldred/pen/xrslz
  18. Additionally I don't seem to be able to get it working with fromTo It seems to completely ignore the from property values, it always starts from 0 regardless of the from values or any existing rules in the stylesheets TweenMax.fromTo(rule, 2, { cssRule: { rotation: 180 } }, { cssRule: { rotation: "+=180_cw", repeat: 20, ease: Linear.easeNone } }) http://codepen.io/raldred/pen/xrslz
  19. Hi again, I've just come across a small issue with the plugin, it seems that it's possible "cssRules" property can be null, this isn't handled. Seems like there's some junk rules objects jquery has in their source CSSStyleSheet {rules: null, cssRules: null, ownerRule: null, media: MediaList, title: null…} cssRules: null disabled: false href: "http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" media: MediaList ownerNode: link ownerRule: null parentStyleSheet: null rules: null title: null type: "text/css" I get Uncaught TypeError: Cannot read property 'length' of nullTweenMax.CSSRulePlugin.js:58 Looks like you added a try catch in 1.10.0 but it need to check that curSS is valid before using it. Something like this maybe? while (--i > -1) { //Firefox may throw insecure operation errors when css is loaded from other domains, so try/catch. try { curSS = ss[i][ruleProp]; if(!curSS) throw new TypeError("Rule object null"); } catch (e) { console.log(e); continue; } j = curSS.length; while (--j > -1) { cs = curSS[j]; if (cs.selectorText && ("," + cs.selectorText.split("::").join(":").toLowerCase() + ",").indexOf(selector) !== -1) { //note: IE adds an extra ":" to pseudo selectors, so .myClass:after becomes .myClass::after, so we need to strip the extra one out. if (pseudo) { a.push(cs.style); } else { return cs.style; } } } }
  20. Yes it does , I should have known that. Of course it can't do partial matching, it would pick up rules it shouldn't. As always Carl, thanks very much. Rob
  21. There seems to be an issue with the CSSRulePlugin with complex rules. The getRule method returns null so you get the "Uncaught Cannot tween a null target." error Looking the plugins source, it looks like it should work fine. I'm using Chrome 31 & Firefox 26, not tried anything else. Here's an example with the issue. http://codepen.io/raldred/pen/hcDey
  22. Rob

    Changes in autoAlpha

    Hey Jack. Thanks for your reply. I must apologise, my message was in haste, I appreciate your comments. I too have done my fair share of flash, I guess the change was unexpected. I rely on autoAlpha quite a lot to provide considerable performance gains. I accept that most people would expect the behaviour and that they are your audience. Yes I will use the approach suggested. Thanks P.S i'm sure you know but `visibility: inherit;` is not supported on versions of IE < 9.
  23. Rob

    Changes in autoAlpha

    Hi, Just been bitten by this after moving from 1.9.8. Well "most people" need to bother to actually learn their craft instead of just wingin' it. Those of use who have, understand the workings of visibility and have done since it's inception. This is a very bad move IMO. Please can we have an option to use this how it's actually defined in the spec? something like: autoAlpha: 1 #=> visibility: inherit; if it really has to for noobies. autoAlpha: 'visible' # => visibility: visible; for the rest of us.
  24. Hey Jack. Yeh no problem at all, I appreciate it would be low priority. Thanks for the offer will bare it in mind. Rob