Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

15 Newbie

About Rob

  • Rank
    Advanced Member
  • Birthday 06/22/1985

Contact Methods

Profile Information

  • Gender
  • Location
    Manchester, England
  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 o
  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
  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
  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
  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
  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 a
  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 repain
  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;
  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 wi
  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 jus
  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