Jump to content

erikb last won the day on January 10 2016

erikb had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by erikb

  1. Thanks Rodrigo. That is a useful video, and indeed my fps is generally excellent in the bar graph along the top of the timeline tools. But what to make of multiple RAF events being fired in 'one frame' (wherein 'one frame' is selected by clicking the rectangle I have bracketed in red)? Down below the fps is recorded as 20fps in the 'frame statistics' tab. And what to make in the drop in fps in the example I posted? Note the precipitous drop to 17fps in the screenshot posted:
  2. This simple modification (just extending animation durations) http://codepen.io/jedierikb/pen/yiImDshows the FPS slowdown in the chrome fps meter. Dropping to 12fps?! Something's not right; this doesn't seem accurate. The animation looks smooth!
  3. If I run and record a timeline in chrome 38 for my sample project, the timeline is a little confusing to me. In what appears to be one frame (in "frames" mode), multiple firings of "Animation Frame Fired" take place. The timeline tool also reports the FPS here is 20! Is this a bug with chrome's timeline tool? It looks like someone else has asked a similar question.
  4. erikb


    I see now that performance is a misnomer: http://jsperf.com/new-date-vs-date-now-vs-performance-now/6 Question answered with some research of my own!
  5. erikb


    Doesn't look like GSAP is using performance.now. Any reason why not? Wouldn't it help with performance on platforms that support it? Details: http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now Just curious as I am using it elsewhere in projects. Thanks.
  6. On this line https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/TweenMax.js#L5435 I am occasionally getting: Uncaught TypeError: Cannot read property 'up' of undefined Which seems... improbable and/or impossible. Yet, chrome37 is occasionally reporting that error. I will try to create a gist of the condition creating it. Just wanted to report the oddity and see if there are any others or any ideas of what might be going on here. Here is the full stacktrace (recent first): https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/TweenMax.js#L5435 https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/TweenMax.js#L5488
  7. Here is a version with a built in FPS counter. http://codepen.io/jedierikb/pen/mHvFj
  8. Thanks for the lazy:true suggestion. I updated the codepen to include that change: http://codepen.io/jedierikb/pen/pDnzC However, it did not result in a boost using my performance measurement technique. I monitor FPS performance on chrome this way: chrome : // flags toggle the FPS setting On my mac, using set yields a lowest framerate of about ~11fps. Using CSSStyleDeclaration yields a lowest framerate of about ~28fps (see framerate monitor at the top right of the images embedded below). What is a better way to measure performance gains? Is there a recommended plug and play module? That would be superb (for this and other explorations).
  9. Carl, Jamie: Thanks for the help. I am now using a proxy element and via my .proxy style I am able to set display: none and still get all of the browser prefixes I need from that element (and keep that element off screen). To get the list of css changes to the proxy element, I am using the CSSStyleDeclaration object [ https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration ]. Here is my up to date codepen showing performance differences between greensock set and interrogating the proxy element's CSSStyleDeclaration and copying values over 'by hand': http://codepen.io/jedierikb/pen/Dboca I am getting better performance when I do not use greensock set (but get all of the sweet greensock browser prefixes and transformation magic for my elements!). I am pleased with the performance. Since the codepen is using the most up to date version of the library, I guess the upgrade to 1.12 regarding thrashing issues did not benefit this issue very much?
  10. Is there a way to know which version of greensock I am using in a forked greensock codepen? Forking one of your examples, and getting all of your libraries, has been how I have built most of my codepens.
  11. cleaned up some lingering questions at the end of a devolving thread [http://forums.greensock.com/topic/9639-unable-to-tween-via-proxy/] I've hit a snag using a vanilla object with css values and trying to apply those updated values to list of dom elements (with changing members). For example, values like scale are not being changed to webkit-scale when in a webkit browser. http://codepen.io/jedierikb/pen/Bikfy #1. Is there a way to have greensock update a vanilla object with css values as it would update those values on a dom element? Or should I use a dummy dom element (wherein dummy is defined as a dom element which I use to scrape the css values I need to apply to the current list members)? #2. What is the recommended way of getting a list of the keys and values greensock has most recently tweened on a vanilla object or dom element? I want this information so I can apply these new values myself (via pure js) to dom elements in my list and not incur the performance penalties for .set described by Jack in the beginning of the post referenced above).
  12. Much thanks Jack, and looking forward to the forthcoming new version. If you could include a note in the new version about where the best practice for minimizing thrashing on onUpdate callbacks, that would be super. For my problem (tweening updates to ever changing element targets), I am thinking it makes sense to tween a generic object with the css values I want applied to my current ever changing list of target elements. Then, on every update, I will iterate over the vanilla object's updated keys and with vanilla javascript apply the keys and values to the currently-being-tweened-target-element. However, I've hit a snag using a vanilla object with css values and trying to apply those updated values to dom elements. Values like scale are not being transformed to -webkit-scale (for example). http://codepen.io/jedierikb/pen/Bikfy Is there a way to have greensock update a vanilla object with css values? Or should I use a dummy object instead? And if I use a dummy object, what is the recommended way of getting a list of the values greensock is tweening on that object? Much thanks.
  13. and using pure javascript for updating the css, I get 19-20fps. http://codepen.io/anon/pen/fHrgj
  14. Here is a rough test -- http://codepen.io/anon/pen/HAJzm When the buffer is compeltely full, i get 11-13fps using greensock and 16-17fps using jquery css. ($body size ~2000x~600, chrome on mac). I am sure there are ways to optimize this code. I am curious what you would suggest. Thanks for your help in exploring this issue, and moreover, thanks for this library!
  15. In TweenMax, you can change the destination parameter values via updateTo. If you reverse the tween, is there a way to change the tween's new destination values (i.e. the original values)?
  16. Okay, that makes sense. However, mine was a toy example to elucidate my use of the word target to mean target element. Sorry for not being clear enough. Let's expand the number of elements to 1k, and every second while playing the tween let's change the tween's target elements (meaning those elements to which the tween's updates will be applied). 1k elements on reload could be 1.5k or 2k... we have a data driven number of elements on every page load. For this type of scenario, we've been using a proxy object (as described in the original post).
  17. I truly appeciate your interest in our situation. Here is a contrived scenario which hopefully helps eluciate our needs: Imagine there are two elements -- element A and element B. I create a linear tween for element A which modifies scale from 1 to 20 over 20 seconds. When the user clicks/touches the screen, I want to stop tweening element A and start tweening element B using the same tween. At the time of the click event, I want element A to stop tweening and element B to jump to the current state of the tween (so it would automatically change the scale of element B to x10 at ten seconds in) tween and continue tweening element B. Element A would no longer be modified as it is no longer the target of the tween. Further, I would like to be able to toggle back and forth between element A and element B or apply the tween to both elements or to neither element. I hope that example is more helpful. Thank you.
  18. I am okay using a proxy object to generate the css string as you've suggested. Looks like that might be the easiest way. Thank you! Regarding animating the linear gradient... is there way to do that simply with greensock?
  19. Alas, the example is not contrived. We've many, many elements moving onto and off the screen which we need to update to the current state of an animation ( and keep animating) when on screen. When these items are moved offscreen, we remove them from the rendering queue. Trying to animate all of them, even with greensock, causes really poor performance. Hence the use of the proxy. Your suggestion of how to handle this makes sense to us! Much cleaner than creating a new object every time. It would be neat if there were a way to dynamically modify the target to remove the need for situations like ours.
  20. In this example (based on a snippet from here): http://codepen.io/anon/pen/syuEf I have three background elements. I am wondering if there is an easy way to: animate the value of the linear gradient background independently animate (different start/stop times, different start/stop values) the background-position and background-size for each background image Do I need to do the bookkeeping myself for each background, or are there helpful features in greensock I don't want to overlook before I begin this endeavour?
  21. Thanks Jamie -- that seems like a reasonable explanation and a good idea for a workaround. Does this issue warrant a bug report on the github repository? Let me step back to explain why I am doing what I am doing: I have elements moving onto and off of the screen which need to have the current tween css values applied to them. Hence my use of a vanilla proxy object. Maybe there is a better way to dynamically change the targets of a tween than my use of a proxy?
  22. I am tweening values in vanilla javascript objects. OnUpdate, I would like to TweenLite.set( $myElements, tweenedVanillaObject ). However, as you can see here http://codepen.io/anon/pen/mbBJL this does not work. The first update takes effect, but all subsequent updates do not. In that codepen, you can toggle proxy2 to run the vanilla object's tweened properties through another vanilla object, but this strikes me as ... kind of silly. What is going on here and how do I remedy this situation for optimal performance.
  23. erikb

    get scale?

    Ah too bad -- your library makes the vendor prefix nonsense so painless. +1 for adding that data to the supersecret _gsTransform or some other even more supersecret place.
  24. erikb

    get scale?

    And what is the recommended way of getting transformOrigin ?
  25. erikb

    get scale?

    (I would like to avoid doing the equivalent of the type of technique described here : http://css-tricks.com/get-value-of-css-rotation-through-javascript/ )