Filed under: Internet, Developer, Snow Leopard
3D animations coming to Safari
Charles Ying over at satine.org has put together an impressive demo using Safari's forthcoming CSS 3D transform features. There is a YouTube video of the demo (you can watch it in the 2nd half of this post), as a nightly build of WebKit or the Snow Leopard version of Safari is required to render it.
The demo, titled Snow Stack, displays a wall of photos in three dimensions and allows you to navigate across the wall using your arrow keys. The wall of photos seems to go on into infinity while it dynamically loads the photos from Flickr as you travel across it.
The demo, titled Snow Stack, displays a wall of photos in three dimensions and allows you to navigate across the wall using your arrow keys. The wall of photos seems to go on into infinity while it dynamically loads the photos from Flickr as you travel across it.
The animation style is similar to the browser plug-in Cooliris (formerly known as PicLens), but it was written entirely in HTML and CSS, with some JavaScript to pull in the photos from Flickr. The animations are so amazingly smooth animations it's hard to believe that only CSS was used to create them. Surprisingly, Safari on iPhone has supported CSS 3D transforms for sometime now, but the animations have yet to make an official debut on the desktop.
If you are running Leopard and want to see the demo running on your Mac you will need to download the nightly build of WebKit to render it in all of its 3D splendor. If you have a pre-release copy of Snow Leopard installed you can simply use the built-in version of Safari to view it. Until Apple releases a public build of Safari with these features those are your only options.
A post today on the Surfin' Safari blog over at WebKit features another demo of CSS 3D transforms called Poster Circle. I've posted a video to YouTube of this demo in action.
Some of the options developers will be able to use with the new CSS 3D tranforms include: scaling, perspective, rotation, and standard 3D positioning. Apple has submitted a specification detailing these features to the W3C. Hopefully as time progresses other browser vendors will implement the spec as well. In the meantime Safari users will have these beauties all to themselves.
Here's the video of Snow Stack:
Get a WordPress.com Blog
![TUAW [Cafepress]](http://www.blogsmithmedia.com/www.tuaw.com/media/tuaw-cafepress-promo.png)
Reader Comments (Page 1 of 2)
Chet said 10:11AM on 7-17-2009
I'm wondering what the practical applications of this sort of thing will be.
Will Safari's pages or tabs be like this demonstration? Will we be capable of surfing through pages and images in this way?
Reply
Joshua Brickner said 10:29AM on 7-17-2009
Practically speaking I think these techniques will be used in much subtler ways. Just think of the great ways Apple uses animations in Mac OS X, I think web developers will use these animations in similar ways in their web apps.
Chris G. said 10:50AM on 7-17-2009
The big thing is it can (eventually) replace Flash without the requirement of needing a plugin installed, not to mention in theory it will eventually be supported by all browsers. This is obviously a big deal when it involves the iPhone since there is no Flash plugin for it and probably never will be.
Sjan said 1:42PM on 7-17-2009
I am wondering the same thing. I think it could be useful if done correctly, or incredibly painful if overdone (like so many other things)
Brian said 10:15AM on 7-17-2009
With this (which is fantastic) and inline video maybe the beginning of the end for Flash and it's processor stealing, fan kicking in, badness....
Reply
Joshua Brickner said 10:30AM on 7-17-2009
One can only hope :-)
igepard said 2:08PM on 7-17-2009
Yes! This is a Flash replacement. I am tired of Flash. Sorry, Adobe.
Reply
samu said 10:41AM on 7-17-2009
No! Don't give them MORE stuff to drown sites in!
There should be a legal requirement for all sites to provide an alternative version without all this frippery! No silliness, and no animation! And no running or smoking or children or talking or fun. Hmmph.
"So, Professor, what was the Internet FOR?"
"Well, my boy, the best archaeological evidence available suggests that it was entirely ornamental..."
Humbug.
Oh, OK, that does look quite cool. I admit it.
Reply
matthew said 11:56AM on 7-17-2009
Actually, by using only HTML and CSS to achieve effects like this, they are providing you with the ability to disable all this behavior at your discretion. CSS provides presentation for information, but the whole point it to allow people who require other presentation formats (screen readers for the blind, for instance) to be able to access the content as well. Things like Flash make that very difficult.
So for someone like you, you'd be able to just choose to disable some or all CSS styling, while still being able to read and access content. So if you want your plain black text on a white background, that's ok.
waiownsyou said 10:57AM on 7-17-2009
I love browser competition. Since recent players of the field like Chrome and Safari for WIndows has come into play, they're working harder by being the first to implement what they hope to be standards and get more people to use their browser. Open video on Firefox, 3D animations and crash-resistance on Safari, and separate process tabs on Chrome make browsers from a year or two ago look like a joke.
Good thing IE doesn't rule the world anymore (even though it's still the #1 browser).
Reply
Tacoman said 11:00AM on 7-17-2009
That is so awesome. It looks like the camera is moving but it is just the screen. Google Images anyone.
Reply
Cristiana said 11:07AM on 7-17-2009
This stuff is great, but, until total IE usage (6, 7 and 8) drops into the single digits, or MS implements any of these cool new standards, most websites will not be able to use any of these cool features.
Reply
Paul said 11:21AM on 7-17-2009
This looks like Cooliris, which is already available for Firefox.
Reply
coyo t said 11:33AM on 7-17-2009
I was going to say the exact same thing. As for 3D effects, look no further than a good script library such as jquery.com
Elean said 9:35AM on 7-18-2009
This is totally different. They use only CSS for the animation. No JS involved for animation, only for getting the Pics. Thats no way the same as some jQuery animation (btw, what 3D animation do you talk about jQuery? Never came across one... 2D ok, but no 3d.) Now things are where they belong: HTML for structure / content, CSS for presentation (ie. animation) and JS for functionality...
Good new world!
mrfine said 11:51AM on 7-17-2009
What happens to Cool Iris, this can already be done now if you install the free plug in from cool iris?
http://www.cooliris.com
Reply
Eric Carroll said 11:52AM on 7-17-2009
I've been using CoolIris for a while now, that does something similar to this with correctly formatted pages, like FaceBook, Google images and Flickr. Very handy to be able to scroll through whole albums like this, very quickly... if you can't wait for this to be "standard" go check out CoolIris...
Reply
matthew said 11:57AM on 7-17-2009
The point of this demo has nothing to do with what it actually does. It's how it was done. The developer chose the functionality as a sample proof of concept demo, but the point is that it was all done with HTML and CSS, and didn't require any plugins.
Eric Carroll said 12:06PM on 7-17-2009
Point well taken, my post doesn't demonstrate I understood that. And although I do understand that, I was trying offer people a chance to play around with something similar (albeit plugin based and less elegant) and help them grasp the "practicality" of even this seemingly frivolous effect.
Thanks for illustrating the difference. Here's to hoping for subtle and useful (and not annoying ad based) implementation of this technology on all our browsers, iPhone included!
Andrew Clark said 12:04PM on 7-17-2009
pretty sick ratatat soundtrack. oh and the 3d effect is cool too
Reply