Michael71
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Michael71
-
I think what the OP is requesting is the HTML5 equivalent of "Tint" that we used to have in AS3. In a nuttshel as far as I know there isn't any "global" solution for this (unfortunatelly).
-
I have created two examples one for horizontal scrolling here: http://nightlycoding.com/index.php/2012/06/parallax-effect-with-jquery-and-tweenmax-greenshock/ and one for vertical scrolling (as the user scrolls the page) http://codepen.io/netgfx/pen/vzIew I hope it helps
-
I mostly go with ScreencastOmatic http://www.screencast-o-matic.com/ and then convert via formatFactory http://www.pcfreetime.com/
-
Yes I see. that is really cool. However since the animation I posted was rather extensive would we fall under some html5 limitation or performance drop?
-
Hello, One of my blog readers recently asked me about this animation and how we could achieve this without flash. http://www.theguardian.com/uk/interactive/2011/sep/05/england-riots-timeline-interactive?CMP=twt_gu I have a gut feeling that this can be done with GSAP, but haven't really put anything into action yet. How do you think it could be done? Would you use Canvas or simple HTML5? Would some CSS3 be needed or we can do everything with GSAP? Let me know what you think.
-
I don't think that was a menu but some text being animated with 3D effect. Besides learning GSAP is quite easy and it will not take you as much time as you think. There is extensive documentation and examples at http://codepen.io
-
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.
