3D Draggable UI using Edge Animate and Greensock ThrowProps

FrameSpark does Taasky

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.

Before I forget, I must give credit to Pierre Borodin for the icons which can be found on Dribbble here.

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!!!!

If you’re interested in a pure JavaScript/jQuery version (no likey Edge Animate?) then please do leave a comment/request – if I get enough requests I’ll code it.

View the Taasky-style demo 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!

Chris Gannon Edge Animate Templates

6 thoughts on “3D Draggable UI using Edge Animate and Greensock ThrowProps

  1. Hey Chris, I follow your blog and am constantly amazed by your work. I recently got a job at a bigger company as web designer and have been for past year using edge animate to prototype my ideas or incorporate into my workflow. Unfortunately I haven’t come up with a workflow on how to tackle a responsive website from start to finish using animate. If you were going to approach a website with five or six pages using animate for interactive aspects like the menu or complicated rollovers but didn’t want to reinvent the wheel when it comes to laying out design by using bootstrap or something similar, how would you approach a project which paired the best of both worlds?

    1. Hi Katherine,

      Thanks for following and for your kind words.

      As far as a responsive EA site goes, a while back I created my (now very out of date portfolio site) http://www.gannon.tv using a beta version of EA, CSS/media queries and Greensock. It was a bit of a long haul – lots of trial and error and at the time EA’s % feature just didn’t work very well – I also employed some fairly violent hacks to make it work. It was my learning ‘transition from Flash to HTML5’ project.

      I don’t think it’s very optimised at all (in fact, I’m ashamed to say that some of the pages crash older mobiles) but it does show that it’s possible.

      It’s not created in the same way and I mainly used it as a learning tool but I sort-of-almost-totally nicked the idea from here http://createdm.com/ – I’m pretty sure that puts me on Santa’s naughty list. Oh well.

      Gannon.TV uses a mixture of EA timeline and Greensock animations – I often scaled full animations down using Greensock (which is pretty CPU intensive and probably naughty and bad of me – the performance police are on my case with this site).

      You’re welcome to have a look through one of the sections if you like – maybe the ‘Contact’ section is a good one? Or the home page? Let me know and I’ll post it (if that version still works in the latest version of EA – who knows – EA has matured a fair bit now thankfully).

      1. Yeah I was going through your code and got to the heart of it, just trying to understand all of your calculations so I can adapt it to what I’m trying to do  – a 3d flip on swipe.

        Thanks for the starting point!

        Andrew

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s