Michael71
-
Posts
139 -
Joined
-
Last visited
-
Days Won
5
Content Type
Profiles
Forums
Store
FAQ
Showcase
Product
Blog
ScrollTrigger Demos
Downloads
Everything posted by Michael71
-
What do you mean exactly? Do you want to animate something that doesn't exist yet? When the objects are added to the DOM you can access them as you would with GSAP selectors or jquery ones since AngularJS also uses jquery.
-
I have set up an example some time ago. This might help you get an idea. However I am using KineticJS for all my canvas manipulations, I find that it has all the missing parts of canvas. http://codepen.io/netgfx/full/IwAoc I hope it helps.
-
What does isPixelCollision does (I get what it probably does, but it is not shared in your code I think). I'm mostly using something like this: function doObjectsCollide(a, { // a and b are your objects //console.log(a.offset().top,a.position().top, b.position().top, a.width(),a.height(), b.width(),b.height()); var aTop = a.offset().top; var aLeft = a.offset().left; var bTop = b.offset().top; var bLeft = b.offset().left; return !( ((aTop + a.height()) < (bTop)) || (aTop > (bTop + b.height())) || ((aLeft + a.width()) < bLeft) || (aLeft > (bLeft + b.width())) ); } You can find it here too: https://gist.github.com/netgfx/8887917
-
I see, well thanks for the info. I will probably start looking into SVGs for that matter then.
-
Hello, I was wondering if it's possible to 3D-Rotate KineticJS objects (shapes). With Tweenmax. If you happen to have some examples please let me know. Thanks.
-
Nice one, really glad you liked the technique!
-
I am currently using Sublime 2, as it has many nice features and a strong community behind it. Also Adobe Brackets seems nice and some of its features like inline editing of functions/css or preview of color or svg by tooltip are always nice to have. Greensock products play nice with everything although I am not sure if any IDE has "code-hint" for GSAP. (That would be nice to have... )
-
I conjured a pen for replay/record canvas actions and the playback is managed with TimelineMax. Currently it only supports canvas that is made with KineticJS (cause it is kinda awesome, and uses GSAP for its animations) Check it out: http://codepen.io/netgfx/full/DLrCy (Make sure to drag the box around after "record").
-
Funny enough for the first 1-2 years that I worked with Greensock products I thought that it meant "GreenShock", because the illustration kinda reminds me of something green shocking someone... Then I saw "Sock" and had my "Aha!" moment. However it still means "awesome" for me.
-
Another thought would be to increase the speed at which flakes fall, and as soon as they reach the end of the screen they get recycled before more appear, so that will give you a stable amount of flakes at any given moment. Also it might be a good idea to perform removal and insertion of new "flakes" asynchronously with TweenMax.delayedCall. I hope it helps.
-
I would suggest to try canvas for this, if you use KineticJS (or any other framework) you should be able to tween individual "flakes" as you are doing now, and it will not be much of a code change from what I saw. In general I have come to accept that animating large number of DOM elements (over 600 or so) has a huge impact on performance. As it has been stated before in these forums its not the javascript part that overhauls the CPU but the html rendering part. In my opinion people where fast to abolish Adobe Flash but as it turns out HTML wasn't fully up to the task of maintaining performance on large scale animations or computations. It is getting there but "Browser" seems to be losing its meaning. -end of rant- If you find something that makes your animations run better let us know.
-
Well from a few tests that I made, there seems to be a number of things that performance can benefit from, here's the list. If using JQuery and appending new items each time, clone() has better performance than creating new elements from the beginning SVGs do offer slight improvement than images Deleting elements asynchronously also helps. The more element nodes in the page the worse it gets All in all what a guy in a forum said is true and probably the solution to my problem Although disappointing...
-
Thanks for the info, I will do a scan through my code and see if anything falls under your suggestions. I have some questions however, If I animate x,y instead of left,top with GSAP, will the x,y be translated as relative to the parent of the element or the document (I want the latter). I am using multiple TweenMax.delayedCall to "animate" or alter the background position of a div and thus creating sort of animation (explosion). Should I use another GSAP method to achieve this? Are SVG achieving better performance than images on Chrome and/or GSAP? Thanks again for your support on this. By the way, latest Firefox achieves 62fps at all times (on my game) and animations look way sharper and smoother...
-
Sorry to revive an old post I just did not want to create a new one for this but I'm having similar issues with Chrome and animations. In Firefox and even IE 10,11 the performance is flawless, always over 50fps. But in chrome when 2 or more animations occur almost at the same time frame rate drops to 20fps or lower, slowly it recovers (so I guess no memory leak) but it is laggy when that drop happens. I tried setting -webkit-transform : translate3d(0,0,0); but that did not work either. If you have any ideas of what is going on that would be awesome I have set up an example here: http://netgfx.com/trunk/games/LCS/index.html (assets and code are licensed & copyrighted)
-
Well from my experience with similar effects I believe this is a case where the browser fails because of render, animating large images causes the browser to struggle and thus frame-rate drops. I believe this causes whatever jitter/stutter you are experiencing. However for me the site looked fine in terms of animation (Chrome latest)
-
Hello, I'm making a small 2D game and using (naturally) GSAP for the animation engine. So I'm Tweening a bullet by x,y and onUpdate I'm running collision detection to see if the bullet collides with any objects. However as the objects on the DOM increase onUpdate seems to be "skipping" some frames thus "lagging". Is there a better way to run somewhat complex code with TweenMax/Min? Maybe by listening on ticker? Or is onUpdate using requestAnimationFrame already? Thanks in advance!
-
Here's a simple code that uses rotation and onUpdate to detect collision detection even with elements that are not "colliding" but simply align. http://codepen.io/netgfx/pen/BwKdo
-
It's actually not animating anything on that SVG, either fill, stroke, or x/y. Not exactly sure why but in general GSAP doesn't have much problem with path attributes.
-
Hello, I was wondering if TweenMax could (with a plugin) tint kineticjs objects or images. And by tint I mostly mean colorize them. I located another thread that showcases this but for easelJS objects. Thanks in advance.
-
Could you specify in which SplitText library are you referring?
-
I thought of that too, but I'm not sure if the path can have that 3D feel. At least I haven't seen any examples showing that.
-
It doesn't seem to work, still the GSAP code forces the object to rotate around it self (and this is not desirable). I'm trying to achieve something like this: http://codepen.io/juliangarnier/pen/idhuG Where the planets don't actually rotate around themselves. Just around the central object. Updated the pen to show what I'm trying to achieve with GSAP but not quite making it http://codepen.io/netgfx/pen/pBgbo
-
heh... no nothing like that, I was simply trying to find a way to create an "orbit like" animation with 2D means, and the first thing I found was a css3 example... from that point on, I was trying to convert it to GSAP for all the points you mentioned. Personally I find it very frustrating to work with CSS animations (directly onto css files) because of the workflow. I'm a little old-school and when I hear "functionality, animation, etc" I tend to think "code" and not "design or styles". I'll give your suggestion a try and let you know. Thanks.
-
I see, yes it is working now but I still have one question. Why the following CSS code doesn't "rotate" the "pink sphere" around it self, whilst the GSAP equivalent does. @-webkit-keyframes pathRotate { from { -webkit-transform: rotateZ(0deg);} to { -webkit-transform: rotateZ(360deg); } } @-webkit-keyframes electronFix { from { -webkit-transform: rotateX(90deg) rotateY(0deg); } to { -webkit-transform: rotateX(90deg) rotateY(-360deg); }} GSAP: TweenMax.fromTo('.path' ,5, {rotationZ:0}, {rotationZ:360, transformOrigin:"50%, 50%, -200px"}); TweenMax.fromTo('.electron' ,5, {rotationX:90, rotationY:0}, {rotationX:90,rotationY:-360, transformOrigin:"50%, 50%, 0px"}); I have updated the codepen to match this question: http://codepen.io/netgfx/pen/pBgbo Thanks.
