Wednesday, July 29, 2009

Future Safari Updates to Include Super Cool Animations

I've always loved Apple's 'Cover Flow' animation. It serves a very practical purpose by allowing you to visual see information in a way that makes searching fast, easy, fun and, as well, visually stunning to look at.

Cover Flow, as you probably know, is now also a part of Safari 4.0 where it is especially useful, at least I think so, for navigating through your web history. It's a big plus to be able to see, and thus better remember, what your looking for. The old way had you pouring over long, boring and tedious lists of similar looking words, that were and still are a pain in the old you-know-what?

Well, if your wondering what Apple could possibly visually add next to Safari, well you only need to look below. Here, in this YouTube video, you can get a taste of future. As you can see, Apple has developed some pretty amazing effects called 3D Transform. These were created for it's open-source project WebKit, on which Safari is built, plus several other browsers as well, including Google's Chrome.

Yes, as Surfin' Safari, a WebKit blog, points out, with 3D Transform, Safari will yet again transform how we view things on the net. Just some of the new 3D Safari animations features, that they highlight are as follows:

"translate3d(x, y, z), translateZ(z)

Move the element in x, y and z, and just move the element in z. Positive z is towards the viewer. Unlike x and y, the z value cannot be a percentage.

scale3d(sx, sy, sz), scaleZ(sz)

Scale the element in x, y and z. The z scale affects the scaling along the z axis in transformed children.

rotateX(angle), rotateY(angle), rotate3d(x, y, z, angle),

The first two forms simply rotate the element about the horizontal and vertical axes. Angle units can be degrees (deg) radians (rad) or gradians (grad). The last form allows you to rotate the element around an arbitrary vector in 3D space; x, y and z should specify the unit vector you wish to rotate around (we’ll normalize it for you).


This function allows you to put some perspective into the transformation matrix. For an explanation of p, see below. Normally perspective is applied via the -webkit-perspective property, but this function allows you to get a perspective effect for a single element, with something like:

-webkit-transform: perspective(500px) rotateY(20deg);


This function allows you to specify the raw 4×4 homogeneous transformation matrix of 16 values in column-major order. Have fun with that!

We’ve also extended one other CSS transform property, and implemented the four other 3D-related properties described in the spec:

-webkit-transform-origin now accepts three values, allowing you to specify a z offset for the transform origin.

-webkit-perspective is used to give an illusion of depth; it determines how things change size based on their z-offset from the z=0 plane. You can think of it as though you’re looking at the page from a distance p away. Objects on the z=0 plane appear in their normal size. Something at a z offset of p/2 (halfway between the viewer and the z=0 plane) will look twice as big, and something at a z offset of -p will look half as big. Thus, large values give a little foreshortening effect, and small values lots of foreshortening. Values between 500px and 1000px give a reasonable-looking result for most content."

Wow, and that's just for starters folks. In the meantime, if you interested in having and enjoying some of these cool, jaw dropping, features now then look no farther than Cooliris, a free photo-viewing utility that works on both Safari and Firefox. Cooliris gives you that photo-wall experience, and allows you to surf and view content from either Flickr or YouTube, or photos from your computer, in a flashy 3D environment that is sure to dazzle and amaze your friends. Trust me, I'm running it now and it works great and looks absolutely stunning! I'm pretty sure, if your anything like me - your going to love it! It will give you a glimpse of just what to expect in upcoming Safari releases, as Apple yet again goes all out and raises the bar of just what a browser can do.

Of course, all this visual glory comes at a price, namely performance, so it helps to have the latest and the greatest in hardware. But, from my own personal experience, I can tell you, quite frankly, that Cooliris works great even on an old eight-year old PowerPC system, the oldest that I have yet tried it on.

So, in conclusion, it's obvious that as exciting as the latest Safari release was, its only the beginning of what promises to be even a more exciting browser experience in the future. Yes, even though such dang-fangled contraptions can be big and nasty performance hogs its not that quite that bad, thanks to the latest advances in today's cpu's, graphic cards and OS technology, these issues are fast becoming increasingly mute. What's more, Snow Leopard and it's upcoming amazing Grand Central and Open CL technologies should utterly put all of those concerns to rest, once and for all!

So, when it comes to Safari and flashy animation goes, well, the future looks bright indeed, very, very bright. I barely can wait for Apple to start applying it's new open 3D Transform technologies not only in Safari, but also in future system-wide OS X upgrades as well, because, for one thing, this little tech-junky can never quite ever get enough of those dang-tooting, whiz-bang, freaking out cool visuals features for my liking, so I say - bring it on baby!

And that's my 2 cents 4 this Wednesday, July 29, 2009


Mark@Cooliris said...

Hi Don,

Thanks so much for mentioning us! Cooliris is definitely an awesome way to view your media (and, as you said, wow your buddies).

Of course, we depend greatly on user feedback to keep improving Cooliris, so let us know if you have any ideas or suggestions ( And check out our blog to get the inside scoop on what's coming up next! Thanks again.


I am a lover of children's literature said...

Thanks Mark for your comment.

Cooliris truly is cool; I personally use it big time. In fact, I can't imagine ever doing without it now that I have it.

Cooliris is a product that you can be proud of.