Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by trsh

  1. True, but first time loads are also important
  2. Sadly, but I want to use TimelineLite, because min library size is critical in this project
  3. Hi, I want to play a Portion of my timeline - by seconds, progress or frames (whatever). For example: 1) Timeline is 10 secs 2) I want to play from 5 sec to 7 sec. 3) Add pause I think will not serve very well, as those portions change dynamically :/ Can't figure out from documentation, how to do this.
  4. Carl. Mkay. You last example seems to do THE thing. I will try to integrate in my project tomorrow. Anyway, I think, that modified behavior when using pauses will attract more confused GSAP users
  5. Tried it without onComplete callback (but with a func. in timeline), same -> http://codepen.io/anon/pen/gwvbgm?editors=1011
  6. 1) Carl thanks for the remarks. Sure I can prepare my samples better and I understand you very well. Next time i'll do it! 2) I have seen this overwrite setting, yet I couldn't figure out from the documentation what it actually does. Like what doe's it mean to Overwrite a tween? Sure you know, but I can sit for hours - google and experiment with that to understand the point. Anyway it doe's not seem serve well in my case, as it kills of further tweens -> http://codepen.io/anon/pen/KgQwPQ?editors=1011
  7. 1) I actually do not animate anything using left or top. It's set in very end of red box animation. And it's intended that way. 2) Can I some-have change the order? First x (taking in account old left position), and then add left. 3) And more importantly - why is this working in the way I want, if I do not add pause?
  8. http://codepen.io/anon/pen/WGdWqL If I remove addPause line, the animations end as they should. With it, for some reason red (stalled) block goes nuts Could be that this is a bug? If I want to use addPause and modify red block in end of it's tween, how can I get around this?
  9. trsh

    problems with addPause

    OK, OK!
  10. trsh

    problems with addPause

    Thanks. For now I will go with your first example. I'm also not sure, if addPause should be added multiple times in same spot, but in the same time that's for what word "add" stands for. Should be renamed to setPause (or something like that) otherwise.
  11. I have code that looks something like this http://codepen.io/anon/pen/XjgVWN . The problem is, that addPause overwrites previous added addPause (with same time), and the callback is gone. Any tips how to make this work? How can I get both callbacks in same time? P.S. I cant create a Master function, with sub-functions in my case :/, my real project code is very dynamic.
  12. And I think I know what to do, and the limitations. Thanks guys for input very much. GSAP team rocks's )
  13. It's an commercial TV. Kind of you can program it to run same app or web page on start, has additional JS calls to control the TV options, etc,. Not standard with TV channels and smart features. The refresh rate is fine. The problem is with its GPU bandwidth. Anytime (or, at time) a a new layer is pushed to VRAM, rendered can't handle stable performing.
  14. Carl. And doesn't work for ex. like this http://codepen.io/anon/pen/ORpLKB. Having layer, inside transformed layer is even a larger performance hit. So I will have to do this smart, and layerize in right time and place (better when nothing moves).
  15. Carl. Yes. That's was kind of my point. What is the drawback of your strategy, that you kind of can't know when all stuff is layerized. Especially when it's a lot.
  16. Right now i'm sitting in front of PC (GTX 750TI + i7). And of course it runs smooth. Can't be any smoother. But To my right side I have an LG TV, which hardware is much less perform-ant, and for what I have to develop. And the LAG is there and it's very annoying. It's there every time new layer is written to video memory. This can't be a clear GSAP problem, and I'm not telling that. I just wanted to start a brainstorm, hear and speak out ideas and suggestions.
  17. Btw this example confused me, and it's preload doesn't work at all. You can see in timeline that resources are downloaded twice.
  18. This kind of solves the above perf. problem -> http://codepen.io/anon/pen/ORpLKB, but I'm guessing the repaint time = ".4", and that's no good in the end :/
  19. 1) It sucks that requestAnimationFrame method doesn't do the job 2) You present a very simplified case. This example performs bad http://codepen.io/anon/pen/amJoQk . You can force3d on "inside" box, what will be slow because parent matrix is added to child on every frame. Or you Don't force - then the child box is repainted right in the middle of animation and causes my described lag. Neither performance solution is good. If the inside Box would wait until is painted, and then move, it would solve my problem.
  20. This solution smoothed my animations BY ALOT -> http://codepen.io/anon/pen/ampgVL?editors=0110 , but to do this now for every tween.. brrr
  21. Ok. Here is the codepen -> http://codepen.io/anon/pen/LRxozR?editors=0110 OS: windows, Chrome (latest stable). Instructions: 1) Open codepen ex. abowe 2) Open DevTools 3) Seek for Render tab in dev tools 4) Check there Paint flashing and FPS metter 5) Reload the page 6) Check the fps GPU memory 7) Press start button in my example 8) Notice a green flash (new layers created) 9) Check the GPU memory now (its grown, as layers pushed to VRAM) 10) After animation ended check VRAM (same as at beginning, layer is cleared) Mark. You wont see no Performance problems, lags, whatsoever on a good computer, because the Painting the layer and pushing it to VRAM will just take 10 ms or less. On more shity device, you will experience a LAG (due repaint and push to VRAM) and probably start to witness the animation on half way. Is this clear enough?
  22. Sorry for the misspelled topic . Seems I cant correct it.
  23. So this is a classical processing pipe-line for GPU rendered animations via CSS transform: 1) We start start to animate a block from HTML with, for example, TweenLite.to(x:100... 2) At that moment (very start), what happens internally in browser, is that this block is Repainted to a separate composite layer. 3) This layer (when ready) is pushed to VRAM for fast access and animating. 4) Layer decomposes and clears from VRAM when the browser thinks it must. And as we know this works pretty well! But, Where my problem arises is POINT 2,3. On lower hardware, when the initial repaint happens and layer is pushed to VRAM, there is some 100-200ms LAG. And when the animation it self is 1sec or less, this LAG just kills it: a) first of all there is a kind of a shutter at that moment, secondly.. I start to see the object animation already 30% complete (for ex. if the animation is x from 0 - 100 in sec, I start to see it happening on x=>30), when the layer is ready. The potential solutions: 1) Use will-change or empty transform to fool the browser, to push layer before animating. Well.... will-change is kind of experimental and it might be removed, and does not work on IE. empty transform does't work on chrome any more. And the list goes on. And anyway, at some point the browse might consider destroying the layer (to much idle, etc.). So very unstable. 2) It would make sense to me, to animate an object via transform only when the repaint is finished. Otherwise it will always look crappy. As there are some tips out there http://stackoverflow.com/questions/14578356/how-to-detect-when-an-image-has-finished-rendering-in-the-browser-i-e-painted (i like second answer), how to detect the repaint happend, maybe this can be patched to GSAP? What do u think of all this?
  24. trsh

    Modifiers plugin bug?

    Jack. Thanks. I understood it now. About some things: What's the logic for the order. Can I predict/control it some have? Should be the modifier called on the Rewind update? Does not make a lot sense to me & makes the Rewind process it self kind of unstable (as we can see). Actually my example is very close to that I wrote at the post beginning. The problems with your suggestions are: 1) You suggest a lot TweenLite.set(), but with "set" values doe's not rewind on restart. I would have to handle than manually, and there by over-complicate things. It's cool in a simple example, but in larger project it could get a nightmare. 2) Modifier is an overkill for me (especially with lot logic in it), as I want only push new transformOrigin to from() / once before animation starts. 3) To use invalidate, I would have to catch moment when animation starts, but that's onStart and that's to late. In other words. I want to catch a Tween in timeline, right before from() is set (or if no from - at onstart), and re-init that tween vars, in a manner so I don't have to manually reset on restart. )
  25. trsh

    Modifiers plugin bug?

    The problem with tm.set, that I would have to manually RESET stuff at some points.., where animated vars on other hand are reset by engine, when, for example, timeline restarts. And I can't change vars & run invalidate in onStart . It has effect only on next run. http://codepen.io/anon/pen/qaObEV?editors=0010 -------------------------------------------------------------------- Think I have a type. Will recheck