al

Thanks for the information Rodrigo! I guess the best bet is to just get a cheap android phone to test with. Is there any more information on some specific gotchas for android to look out for (like the pixel-snapping stuff mentioned in the article above)?

Is there a way to test the android OS + Device type without having an android device? An emulator that is more than just setting viewport sizes? I have some interactions that work buttery smooth on IOS and work very badly in Android. I could post a URL, but I'm more interested in seeing if I can do this on my own without the device. In the meantime I am going to attempt to follow the tips in this post, but the only way for me to know if my results were fruitful is to ask my colleague tomorrow at work to yet again open my app and see if it still sucks. Any help would be appreciated. Thanks, Andrew

Awesome, thanks Jamie.

Wow Carl, thanks. I don't think I ever would have gotten to that on my own. I'll certainly use this as a basis for what I'm trying to do. I'm a bit concerned that the proxy is going to get in the way of other clickable objects behind it, but I'll deal with that when I get there. Thanks again, Andrew

I am lost. I researched how to do this but really couldn't come up with anything specific for doing this with Draggable (and ThrowProps). I feel like I am missing something obvious here. How can I make the left-hand side box flip (with rotationX) instead of spin: http://codepen.io/andrewleith/debug/oeHzn/ I tried (poorly) with the right-hand box box. Can anyone point me in the right direction? Thanks, Andrew

@GreenSock: You're right, you certainly cannot sprinkle bits of famo.us throughout your code like you can do with greensock (or most JS frameworks for that matter). Its more than an animation engine -- you write your whole project in it. It is certainly a paradigm shift, you don't really even write any markup or CSS as everything seems to be in the JS files you build. My initial reaction left a sour taste for sure, but it will take a little time to see what patterns and techniques emerge. Yes it seems to be all about the matrix and matrix 3d transforms which is why I also thought that perhaps it would be comparable for similar types of animation. Looking forward to the article Thanks for your insights, Andrew

So, can anyone do a performance benchmark test against this newcomer? Is famo.us everything it claims to be? Andrew

Genius. I figured it wasn't a greensock issue at all. I'll play around with the css to bend it to my will. Thanks very much!

Thanks for the link to that codepen, I'll browse through those animations. One thing I just noticed by doing this is that if my elements are not set to position: absolute, the animation does not occur as intended at all. Check out this codepen: http://codepen.io/andrewleith/pen/vykLB The animation run on both set's of li's is the exact same, yet only the position:absolute version "drops" onto the page (obviously this doesnt work however since all the text is stacked on top of each other). Is there something fundamental I'm missing here? Thanks, Andrew

I thought about this last night after I posted this and finally I realized I shouldn't be using the SplitText plugin at all. That plugin is for breaking text into dom elements so you can animate them. In my case, I already have the dom elements (namely, the li's inside my ul), so all I would have to do then is animate each li individually to have them "drop" onto the page. I'm new to codepen and I didnt realize you could fork them, I will do that next time, thanks for that tip. While I have you, are there any resources for some more "complex" animations, such as the dropping I keep referring to, or will I have to figure out how to code it? My idea would probably be to animate the scale and y properties of each li to have them "drop" onto the page. I would likely have to animate each at a different speed and and varying intervals to kind of make it look like it was "raining" items. Any tips would be greatly appreciated. Here is a pen of me trying to accomplish this. Actually, it isnt all that bad: http://codepen.io/andrewleith/full/vykLB Thanks again, Andrew

Is it possible to use SplitText on some markup (and text) without it stripping the markup? I would like to "drop" the text onto the screen, but preserve the markup so I get its positioning (its all currently in a UL). I was going to try to codepen this but I can't figure out how to reference SplitText and the other core libraries. If this is possible with split text, how can you animate "dropping" an element onto the page? What properties would you use to do it? Scale with x/y? Thanks, Andrew

Hey guys thanks alot for looking into this. I scratched my head for awhile and then i finally noticed i had enabled some mobile-emulation chrome extensions (ripple, as well as the one built into chrome) which made it all so horribly choppy. Sorry to waste your time. Thanks for the tip on the set() method, I will use that to intialize values for sure. And also the tip on tweenmax, I didnt realize i could just load that instead of all the other files. Very helpful! Andrew

I am using greensock to build a single page application. I want different pages of the application to come into view in response to UI events. I built a simple codepen to show one way to do this using absolutely positioned panels. http://codepen.io/andrewleith/full/vFiKy The animation is super choppy in chrome. Anyone know why it would be? Is there a fool-proof way to do this? I tried using both 'x' and 'left' properties in my tweens and neither seemed very good. Panel2 is showing using 'x' and panel3 is showing using 'left'. Thanks! Andrew

Hi Carl, Thanks for your advice. When I tried your technique I ended up with a lot of autoplaying timelines that I couldn't seem to avoid. In the end I realized I didn't need one big timeline, it doesn't seem to buy me anything extra. Here's what I ended up using, which I believe could easily support the overlapping animations you were talking about (although my UI doesn't really let that happen anyway). I added all of my UI transitions to an animations object and paused them: var Animations = { ShowSplashScreen: new TimelineLite({ ... }).pause(), HideSplashScreen: new TimelineLite({ ... }).pause(), } Then throughout my business layer I call these as necessary. This seems to work very well in my app. Everything is running buttery smooth. I also dynamically add some callbacks at some points to have the animations fire some functions when they complete that I didn't really want to mix into the animation object itself. My next step will be to add in history.js support, and having the animations split out like this will be very useful so that I can reverse() things when the user presses the back button. Thanks again, Andrew

I just read http://www.snorkl.tv/2011/03/teaser-bullet-proof-timelinemax-page-transitions/ It sounds like a better way to accomplish what I was trying to do, although somewhat dated. Does anyone have any feedback for his approach? Is it what you all use?