Javascript/jQuery 3D iPhone built with Greensock

3D iPhone in JavaScript and jQuery using GreensockHere’s a prototype I’ve been working on using the Greensock JS and CSS libraries (TweenMax and ThrowProps mainly).

In a browser that supports touch events (Chrome desktop or most tablets) you can spin it and pinch and zoom it.

Performance is pretty smooth but there’s always room for improvement using a sprite sheet. I appreciate the images and detail are by no means perfect – you can see joins and I haven’t added in headphone sockets, mute buttons or been very true to how the iPhone actually looks in detail so bear in mind that this is more of an experiment in creating 3D objects with rounded corners.

Firefox also has some Z depth issues which I haven’t quite worked around yet so it’s best viewed in Chrome or on an iPad (all the client work I’m doing currently is for an iPad, hence all my tests are optimised for it).

It would be totally possible to make the actual phone screen interactive like an actual iPhone – I just haven’t got around to it.

I originally created this in Edge Animate and decided to abstract my code into separate JS files and then minify/Uglify everything just so I could determine a final file size. Excluding (non-optimised) imagery and non-minified RequireJS and jQuery, it weighs in at 205Kb – not bad.

I’m interested to know what you think and what kind of frame rate you’re experiencing on your device – leave your thoughts in the comments.

Enjoy!

3D iPhone JavaScript/jQuery demo

14 thoughts on “Javascript/jQuery 3D iPhone built with Greensock

    1. Nothing commercial – it’s all JS and CSS animating with GSAP (Greensock).

      If you haven’t tried Greensock yet check it out – the performance increase (and feature set) compared to jQuery.animate etc is pretty significant.

    1. The images are about 290Kb (given you need transparency there’s no getting around the need for PNGs) – then if you use minified jQuery v 2.0 you can add about 80Kb and then about 80Kb for all the other JS files – so I’d day about 450Kb in all.
      You could probably shave off a fair bit more by minifying ALL the JS files – not bad for a 3D phone that runs on an actual phone 😉

  1. Wow! Those rounded corners are made of 5px divs!? Did you find a good way to automate the creation of the edges?

    1. I created the DIVs with a 3D transform origin that is the centre of a circle. I then looped through a certain number of times to add them at new rotations (this was trial and error) until the corner was filled with rotated DIVs.

      It uses a similar technique to my 3D can on CodePen http://codepen.io/chrisgannon/pen/olkvm

      1. Hi, this is just awesome !!!
        Just a question, the iphone demo is ok on a phone but the one with the soupcan isn’t.
        Is it due to GSAP version used ?

  2. Hi usul,

    The soup can is much more processor intensive because it contains over 100 instances of the soup can image (you just see a tiny offset slice for each facet that makes up the edge).

    You could help performance by dropping the numbers of facets but this would mean the can would become less round (the edges would start to resemble a hexagonal shape).

    So the the rounder the can, the more facets there are, the more intensive it is to render.

    1. What I mean is that on my phone, I can’t move/rotate the can whereas I can with the iphone demo. Seems to be your UIVelocity code that have changed between those demos or another piece of code.

      1. Aah I remember now. I think you can just assign a different trigger element for the drag/swipe.

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