3D Christmas Carousel with Edge Animate and Greensock CSS3

3D Christmas Carousel created in Adobe Edge Animate and Greensock

I’m sure the Christmas celebrators out there will agree that there is only one thing better than Christmas and that’s Christmas in 3D!

You’ll be pleased to know I don’t expect you to wear any silly glasses but because of the swipe gestures it uses (I designed it specifically for an iPad 2 as a stress test for the job I’m currently working on) you will need to view it either on a tablet device in landscape or a desktop browser that supports touch event emulation (I recommend Chrome as it supports touch emulation natively – just follow these simple instructions).

This demo uses the new and extremely exciting Greensock CSS3 3D libraries – I’ve been lucky enough to have had early access to these robust and flexible libraries (what else do we expect from Greensock?) so I have a fair few demos, tutorials and posts to show you in the coming weeks and months.

Greensock’s Jack and Carl have been working very hard not only to bring you some amazing tools but also to take away a lot of the browser vendor headaches that are plaguing development right now. Now I appreciate the irony that this demo doesn’t work on a lot of browsers but as I said, I developed this specifically for an iPad2 so it isn’t really meant to work on a non-touch device at all. Having said that I’ve added in the ability to zoom in and out with the mouse wheel which I will eventually convert to a pinch gesture for touch devices.

The Edge Animate source files are commented pretty well (hopefully!), as are the few external JavaScript files – some of them are self explanatory or just utilities where the result of what they do as all you really need to know (like stopping the annoying iOS ‘browser bounce’ feature).

Anyway I hope you find this useful and fun – there are lots of values to play with (in the Animate project file) so dive in a mess about. And don’t forget to select ’emulate touch events’ (make sure you keep the error console open).

Please feel free to express your views and experiences in the comments – I’m always happy to chat about anything.

Oh and Happy Christmas!

View the 3D Christmas Carousel demo

Download the 3D Christmas Carousel source files

2 thoughts on “3D Christmas Carousel with Edge Animate and Greensock CSS3

    1. Cheers Jack. The new 3D stuff is just immense – so much scope for creating some really cool, cross-platform stuff and the performance is, as always, just excellent.

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