scubajosh

Check it out its in beta right now for the public but I have been using it for a year and a half. I made a super light weight version of jquery thats way faster and lighter. It has what you need and nothing you dont. This has been stable in all my projects for a while now in ie7+ https://github.com/Lbox/minowjs

So I am trying to make a green sock js motion blur plugin since its not available yet. Do you guys think its possible to do it without canvas. I am trying to figure out how to make it and so far I think it might be best using css3 or just strictly canvas. CSS Motion Blur http://cssdeck.com/labs/motion-blur There is also grant skinners blur filter for easeljs Was thinking maybe we can port over the current motion blur plugin for as3 using his blur filter. Any thoughts on this or reasons why there isn't a motion blur plugin yet? http://www.createjs.com/#!/EaselJS/demos/filters

I guess you found this fix in the other thread Please see the cross post: http://forums.greens...ces/#entry29973 //just set z (or any 3D property) once to kick the element to the GPU TweenLite.set(element, {z:0.1}); TweenLite.to(element, 2, {opacity:0.5});

It works you should make a bool to invoke GPU but this will work I recomend documenting this where its more visible this issue wasnt really clear to my team along with the speed difference with x,y verse top and left as well. thanks for your help

So it appears that you have solved the problem my co-worker was having in another thread a few minutes ago. The solution to speed things up was to use x and y instead of using top and left. The only thing that we see a big difference in now is opacity being slow. So what if there was a plugin that hooked into the CSSPlugin to hardware accelerate Opacity on hardware accelerated devices? It seems allot eaiser to just support that since thats the last bottle neck I see in your code base for mobile devices. If you have it just as a plugin that extends the CSS plugin and overides __registerComplexSpecialProp method to check to see if you are on a hardware acellerated device then do CSS opacity it would pretty much solve every problem out there.

I see what you are saying and its the argument I been having with my co-workers but they did some tests for IOS devices like they have a carousel they wrote in greensock and one they used swipejs with and the greensock one was chuging on android and iphone while swipejs was smooth... I am trying to get them to put there test's on a jsfiddle so I can post.

I want to make a plugin for CSS3 hardware acceleration support for greensock. Does anyone have a project like this started already this is the weekist link in greensock right now for mobile devices and I dont want to scrap greensock on mobile because of the chug. Also I am interested in plugin primer scripts and what spots I should have this plugin overide in greenock to give maximum performance gains. Any help advice or code started would be apreciated.

You nailed it thanks for your help with this. The solution was to make another container seperate from the animated one and do a scale -1 on it while it is halfway through animation and BAM! TweenLite.set($("#videoBg")[0], {transformPerspective:-1000+"px"}); var tl = new TimelineMax({}); self.flipRotation -= 180; var rotationPosObj = { half: self.flipRotation+90, full: self.flipRotation }; tl.to($("#videoBg")[0], 0.4, {rotationY: rotationPosObj.half, ease:Linear.easeNone}) .set($("#vidContentContainer")[0], {scaleX:(self.rotateCounter %2 === 0)? -1 : 1}) .to($("#videoBg")[0], 0.4, {rotationY: rotationPosObj.full, ease:Linear.easeNone, onComplete: function(){ app.router.videoPlayer.$vid_obj.play(); }}); self.rotateCounter++; <div id="videoBg" class="sprite-main_images-videoBg"> <div id="vidContentContainer"> <div id="videoContainer"></div> <div class="sprite-main_images-shareTxt"></div> <div id="socialButtons"></div> </div> </div>

This example shows the firefox bug I am talking about and works in chrome. http://codepen.io/seraphzz/pen/vzHBl

That example doesnt work but I modifed it a little bit to replicate the issue... I have temp hack to fix using scale on a onComplete but you see a jump. http://codepen.io/seraphzz/pen/jzFqo I should be able to put scale in as a property to tween to. Like this example shows. http://codepen.io/seraphzz/pen/KwmCr -moz-transform: rotateY(180deg) scale(-1, 1); works in crome...

So I have a bug with pure CSS 3 animations as well as green sock animations doing the same thing. So the issue I have is when I do a rotateY on a plane the video player on the backside is backwards I have resolved the issue in chrome bye doing scale(-1, 1); for the css 3 transition for tweenlight it doesnt even affect the rotation of the element and its still backwards. If I do scale(-1, 1); in firefox it goes crazy and does a diaginal flip. Does anyone know how to flip a element in greensock and preserve the elements perspective "not backwards when fliped 180" while having it be compatible in the latest browsers? .front { -moz-transform: rotateY(0deg); } .back{ -moz-transform: rotateY(180deg) scale(-1, 1); } if($('#videoBg').hasClass('back')){ TweenLite.to($("#videoBg")[0], 0.8, { rotationY: 180, scaleX:-1, scaleY:1}); }else{ TweenLite.to($("#videoBg")[0], 0.8, { rotationY: 0}); }

I did a grep on about 70 modules. I would say about 90% of my modules use this functionailty below. The rest I rarely use and everything I do has animations. TweenLite.to($("#buyNowBtn")[0], 0.3, { css: { autoAlpha: 1} }); TweenLite.to($("#slideWrapper")[0], 0.8, { css: { top: this.incrementTop} }); TweenLite.to($("#microWrapper")[0], 0.8, { css: { left: this.xPosition} }); TweenLite.to($("#fullSizeImage")[0], 0.3, { css: { autoAlpha: 0 }, onComplete: function () { } }); TweenLite.to($("#videoContainer")[0], 0.8, { css: { height: 438 + "px"} }); So animate top, left, height, width using pixles, alpha and a oncomplete callback... Thats all a nano version needs... Anything other than that is bloat! The main reason I use tweenlite is performance, it isn't because of the syntax I can write a wrapper to make it look like anything infact I tied it in with my notJquery to look like $("#selector").animate(); so jquery plugins will work with very little change, and I can swap out any animation engine I want. Even tho the syntax is similar with what I did in my flash days just about every animation engine has the same/similar syntax...

Lets just put it this way my last pingdom test with my framework which is a stripped down version of backbone I removed underscore and added in the 11 methods underscore uses. I am using Tweenlite and its my only bloated piece code on it. I made my own version of jquery with qwery, bean, bonzo, tweenlite, "took methods from jeesh" and using reqwest. Everything is AMD, and I am using rjs optimizer and grunt. My loadtime from pingdom test is 357ms. If I was just using require it would be 5 seconds async. My entire framework is lighter, faster, more powerful than jquery alone. My test page has 5 tabs and about 30 images all in one sprite using glue and a custom tinypng.org service I made 300kb pngs down to 80kb. My sass is converted to css and contatenaded in one file 30kb. My framework and all my modules are about 180kb minimized and compressed. This includes product 360, the heaviest part is videojs, store locator, product reviews module, tool tips, my own custom omniture code that calls omniture. I have full MVP with backbone micro I call it, and dotjs, with fully functional dom manipulation, animation, query engine, cross browser events, and ajax. http://stackoverflow.com/questions/10048740/stop-browser-to-make-http-requests-for-images-that-should-stay-cached-mod-expi There is no framework out there that can top my functionailty and performance! Now trust me when I say this make it nano please! I cant show you the code because I work for a big corperation that pays me allot of money to keep it private... thanks, Josh Spivey

I dont agree with your approach at all I been building some big javascript projects after this discussion and have ran all kinds of bench marks the benefit you get from caching is minimal compared to the benefits you get concatenating. In theory yes cacheing sounds nice, but it actually slows things the best practice would be to minimize requests because of the time it takes to hand shake for each individual file is far greater than the added k-weight of the non cached file. I tried both ways on some very heavy modular javascript pages and the difference is massive 2s for my approach vs 7-30 seconds for your approach average. The good thing is I been using tweenlite on my projects and they dont need to be in a AMD wrapper to get to work with r.js optimizer to concatenate them together. All you have to do is throw it in your AMD definition. Also I would definitely say AMD is the way everything is going. If you follow everyone at fluent conference this year allot fo the big dogs like Paul Irish or Nicholas Zakas have predicted these trends. I tested out there stuff with projects like backbone boiler plate and have had far greater success then without it. Also jquery supports AMD and since there new update with grunt support you can now split jquery up to make it smaller now. Maintainable javascript Must see http://www.slideshare.net/nzakas/maintainable-javascript-2012 Application Architecture http://www.slideshare.net/nzakas/scalable-javascript-application-architecture-2012 High performance javascript http://www.slideshare.net/nzakas/high-performance-javascript-capitoljs-2011

If you go the AMD module route which is the way everything is going. I was told bye a worthy developer "but haven't verified it yet" that Require.js has its own build script that looks to see what modules exist and all its dependencies then throws in a concatenated file together. You can maybe just right throw that ant target in a primer script for people to add to there build scripts for further optimization. Either way if you go the AMD module route it will take care of the issue you can do a request or you can concatenate it.

I think the solution is to make a adhoc system like ender.js or incorporate it into that. The main reason your system was so popular for flash is its ability to be small and functional or bigger and fully functional mainly working with rich media. I kind of disagree with the file size thing tho mainly because sites are moving to responsive to support mobile sites. Websites have to scale now to any device from iphone to ipad to desktop all on the same site "separate mobile sites are dead now", I think file size is more important than ever. The reason people are moving away from jquery to ender is because its ability to do the same thing with the adhoc approach minus the npm integration reasons. You need some sort of package manager to add and remove packages and resolve dependencies. Yes you have my vote for tween nano, along with your motion blur plugin, loader and transform around center/point. Also for your css plugin you should make it use a dynamic loader with a feature detection poly-fill. The only drawback is that extra http request but it will be universally faster.

are you planing on a nano version for javascript?

has this been tested with any other selector query engine like qwery? I want to get this working on a lighter framework than jquery its a little to heavy for mobile stuff so I use enderjs.