3D Smart Watch Prototype in Edge Animate and Greensock

(jump to 0:40 for the 3D magic!)

This is the latest version of my 3D smart watch prototype built in JavaScript/HTML5.

Created using Adobe Edge Animate and Greensock’s Draggable, TweenMax and ThrowPropsPlugin it’s created at a larger scale but designed to be watch-sized.

It runs beautifully on an iPad and iPhone which is important as smart watches and wearable tech have significantly less processing power.

It’s a work-in-progress and I’d like to add in an ‘Updates’ feature when you pull up from the bottom that would give the user an update summary from their chosen social media platforms.

If you like it, have an idea or have any suggestions please leave a comment! 🙂

Chris Gannon Edge Animate Templates



2 thoughts on “3D Smart Watch Prototype in Edge Animate and Greensock

  1. Wow… that rotation transition is freakin’ silky… and the level of depth in the rotated object is awesome.

    My two personal criticisms are these:

    1. The pulling down from the top creates a little bit of a disorienting 180 deg spin where as the left and right are already properly oriented.

    2. The pulsing of the colon between the hour and minutes. I believe it’s standard for the colon to be visible on each second where in your demo it’s only visible on the even seconds. Maybe it’s intentional and Americans have been doing that wrong all this time too, but still kinda weird.

    Otherwise… spectacular job and way beyond the reach of my abilities. Maybe a tutorial? Or at least somewhere that your code can be studied? I always want to learn from the masters. Thanks Chris and amazing work.

    1. Hi rbt,

      Thanks for your constructive points – I agree with point 1 regarding the pull down – I should change it to fit with the way the other faces work. It’s because it’s upside down on the other side when it’s created.

      Point 2 was a design decision – it seemed too frantic having it on and off every second (I want it to fade up and down, not just flash) so I chose to halve it. I spent ages messing around with this actually – far longer than I should have (and maybe I ended up with the wrong method so I take your point 🙂 )

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s