trsh
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by trsh
-
-
THanks!
-
I want to move the blue rectangle to exact red rectangle position by also animating rotation back to 0. But because blue has already rotation, the calculations are some have not right and the blue rectangle is not covering red one. Can someone help please?
-
And if you're worried about file size, use a CDN. It's gets cached in a users browser for up to a year.
True, but first time loads are also important
-
Look at .tweenFromTo().
Sadly, but I want to use TimelineLite, because min library size is critical in this project
-
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.
-
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
-
Tried it without onComplete callback (but with a func. in timeline), same ->
See the Pen gwvbgm?editors=1011 by anon (@anon) on CodePen
-
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 ->
See the Pen KgQwPQ?editors=1011%C2%A0 by anon (@anon) on CodePen
-
The "nuts" behavior at the end is happening since your using set() setting both x and left CSS properties in your onComplete. So that is what is causing that offset shift "nuts" your seeing. You are changing the initial left position which is zero (0) and setting it to 700px which changes the orientation of the transform x.
Animating or setting with position offsets especially after a transform has been set will cause janky animation since left and top will trigger constant re-layout in the browser and does not animate on a sub-pixel level. Animating with x and y will allow the browser to animate on a sub-pixel level and will not cause constant re-layouts. And x and y can take advantage of using hardware acceleration to get a much smoother animation
Check out this article by GreenSock's Jack on why x and y are better than left an top.
https://css-tricks.com/myth-busting-css-animations-vs-javascript/
But please standby while we look into this behavior with addPause(), Thanks!
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?
-
-
I can't seem to find any odd behavior here. It seems like it's doing exactly what I'd expect. In fact, a lot of work went into making it function this way
Several versions back, there was a bug report that complained that the addPause() wasn't stopping things deeply enough, like other callbacks that were added at that time (but technically placed there after the pause was in place). So things are firing normally, then as soon as it hits the pause, it pauses all execution. I'm also having a hard time understanding why multiple pauses would be placed at the same spot on purpose, and expected to fire (all of them). Things have to happen in a particular order. So if a pause is encountered, were you thinking that it should still allow further processing and firing of other callbacks after that pause? And what would happen if it hits the first pause(), and then later play() is called? Would it encounter that 2nd (and 3rd...) pause and immediately stop, meaning you'd have to call play() multiple times to get it to work? While I can see how one could argue that's desirable in some cases, I'm pretty sure we'd also get complaints from another contingency who'd argue it's illogical to behave that way.
I don't really understand your real-world use case, but maybe you could just use a single function that manages a queue of functions that you can add to anytime. It shouldn't be terribly difficult (though again, I don't really know the context so I could be wrong).
OK, OK!
-
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.
-
I have code that looks something like this .
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.
-
And I think I know what to do, and the limitations. Thanks guys for input very much. GSAP team rocks's
) -
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.
-
-
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.
-
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.
-
That's what you linked to on Stackoverflow, and using requestAnimationFrame isn't going let you know when an image has been painted. Look at how the background turns red on the 2nd frame request. Most of the images are only partially visible by that time.
See the Pen ?editors=0011 by osublake (@osublake) on CodePen
Btw this example confused me, and it's preload doesn't work at all. You can see in timeline that resources are downloaded twice.
-
-
I'm confused by what you're asking. Is this about images? That's what you linked to on Stackoverflow, and using requestAnimationFrame isn't going let you know when an image has been painted. Look at how the background turns red on the 2nd frame request. Most of the images are only partially visible by that time.
See the Pen ?editors=0011 by osublake (@osublake) on CodePen
Your code could be optimized too. Does this perform bad?
See the Pen ?editors=1010 by osublake (@osublake) on CodePen
Here's a good thread about browser repaints.
http://greensock.com/forums/topic/14213-convert-css3-animation-to-gsap-for-performance-gain/
1) It sucks that requestAnimationFrame method doesn't do the job
2) You present a very simplified case. This example performs bad
. 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. -
This solution smoothed my animations BY ALOT ->
See the Pen ampgVL?editors=0110 by anon (@anon) on CodePen
, but to do this now for every tween.. brrr -
Ok. Here is the codepen ->
See the Pen LRxozR?editors=0110 by anon (@anon) on CodePen
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?
-
Sorry for the misspelled topic
. Seems I cant correct it.
When pc lags
in GSAP
Posted
When computer has some lag or is just slow (due RAM or CPU overhead, etc.), the animations tend to stop and jump over larger intervals or sometimes start in the middle. In game engines this is mostly solved by multiplying the transitions with delta time. What could be solution here- so I always get, see my animation from A to B even if its with bad FPS?