I downloaded a really nice task app the other day called Taasky and I decided to have a go at recreating some of the 3D menu effects it uses in its UI. I remember seeing this 3D pull-to-reveal UI effect as a Dribbble design ages ago (I can’t seem to locate it now) and when I saw that Taasky had actually implemented it I had to have a go myself.
And with Greensock’s most awesome Draggable utility (free!) coupled with the entirely fabulous Greensock ThrowProps, you can do it really, REALLY easily. You can buy it and a ton of other great stuff for as little as $99 here.
Now, you might be thinking – hang on – this guy is just flogging a plugin – I assure you I’m not. I know Jack from Greensock and extensively use his amazing tools (I sometimes suggest features too and sometimes he implements them which is just so cool) but I’m in no way affiliated with Greensock – I just think you should get it because the functionality and performance is unrivaled anywhere and, yes, you will become AWESOME if you do – and hands up who doesn’t want to be awesome?! Ok there’s always one…
So, without further ado I present my simplified version of the Taasky app functionality – I have included a few other little tricks in the Edge Animate JS files too (like the rotating arrows when you pull a menu out) that can be used in loads of other ways (‘pull to refresh’ anyone?) all based around Draggable and ThrowPropsPlugin.
I’ve also put some iOS web app code in the HTML file (along with an icon and splash image) so that you can save it as a web app from iOS Safari – it looks better like this as it fills the screen.
If you choose to download it you WILL need to purchase the ThrowProps plugin – the demo kind of works with just the Draggable utility but ThrowProps is where the true magic is at. Do it. Do it now. Kill me! I’m here!!!!
Download the Taasky demo Edge Animate source files here
Whilst you’re here check out my Edge Animate templates on CodeCanyon – they too might make you awesome – and maybe HANDSOME too!