Screencast: Webkit in Titanium

It's the honeymoon phase of learning a new platform. That part where you really enjoy the features that it offers. It's fun and exciting. You've yet to discover all the weird quirks and limitations. This little screencast is of my little frolic through the fields that is Webkit in Titanium.

If, like me, you've been hearing about all the nice features that have been going into Webkit then come along and check out this 5 minute screencast into a couple useful features.

View with Quicktime View on iPod or iPhone

Within this little screencast, I cover 3 topics fairly quickly: custom scrollbars, a little box-shadow action, and webkit transitions.

Custom Scrollbars

While the idea of custom scrollbars conjures up memories of horridly coloured scrollbars in Internet Explorer, when it comes to desktop applications, the ability to specify custom scrollbars is quite handy. As you can see within the screencast, I was able to replicate the look and feel of the scrollbars from Tweetie with ease.

::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

::-webkit-scrollbar-thumb:vertical {
    -webkit-border-image: url(app://scrollbar.png) 13 0 13 0;
    border-color: transparent;
    border-width: 13px 0;
    min-height: 20px;
}

This code is almost a direct copy and paste from the scrollbar example provided with Webkit (albeit stripped down to the bare essentials).

Box Shadow

Drop shadows on a container are super easy in Webkit. As I understand it, the box-shadow will only work on the Mac and does not work in the Windows version.

-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); 

The first value is the horizontal spread, the second value is the vertical spread and the third value is the size of the drop shadow. The final value is the colour of the shadow. In this case, it's black with an opacity of 0.3. Subtle.

Transitions

Admittedly, it took me a bit to wrap my head around how transitions are supposed to work. Then, it finally clicked. You define transition rules on an element. Those rules define what should happen when a style property of that element changes.

#a {
   -webkit-transform: scale(1);
   -webkit-transition: -webkit-transform .4s ease-out, opacity .4s linear;
}

In this case, I've declared an initial transformation on the object that scales the item to 100%. Then the transition declaration says that if the transform value changes, to ease out over 400ms. If the opacity changes, a linear transition should occur over 400ms.

You could then change the value via CSS using a :hover (or other pseudo class) or via JavaScript, as I've done in the screencast.

el.style.webkitTransform= 'scale(1.3)'; 
el.style.opacity = 0;

Despite my previous concerns with animations being declared in CSS, it works really well in practice.

The other thing to note is that you sometimes want to act on when the transition is complete. This was one of my concerns with CSS-declared animations. Thankfully, there's a TransitionEnd event that gets fired when the transition is complete.

el.addEventListener('webkitTransitionEnd', check);

In this last example, it will run the check function when the transition is done. The event name is currently prefixed, which is unusual for JavaScript, but makes sense until it's standardized.

Enjoy!

Here's hoping you enjoyed yet another screencast!

Published April 23, 2009
Categorized as Other
Short URL: http://snook.ca/s/940

Conversation

16 Comments · RSS feed
Chris Wallace said on April 23, 2009

You're the screencast-master, Snook. Very cool.

James Finley said on April 23, 2009

Makes me want to make some apps with Titanium now. I love Safari/Webkit and all it's great little CSS3 features!

Todd Austin said on April 23, 2009

Nice to have a good screencast to go with this article. really helped to "see" what you were talking about. Keep 'em coming!

Jonathan Snook said on April 23, 2009

Heh, it's funny that you say that I've put a screencast to the article. I actually do them the other way around. I do a screencast but instead of doing a transcript, I basically write the gist of the screencast out. I do it for those that don't have time or maybe don't have audio to listen to the screencast but can still absorb all the juicy info. Plus, search engines love the written word. :)

Todd Austin said on April 23, 2009

@Snook - I often don't have time to watch a screencast and prefer reading a quick article so I may bookmark the screencast for later.

JR Tashjian said on April 23, 2009

Great screencast. I need to start utilizing the abilities of Webkit. I mean, it's freakin awesome!

Dave Waller said on April 23, 2009

Great screencast. I've just installed Titanium and given it a try and I'm really impressed with how quick it was to build an app like yours. Looking forward to more.

Matthias Dietrich said on April 23, 2009

I agree with Todd - I often read the articles and watch bookmarked screencasts later.

Jonathan, can you provide your sourcecode of the example so I/we can play a little bit with exact that example? Would be very great!

And I'm interested in the name of your screencast app... :)

Kuba Bogaczewicz said on April 23, 2009

Very nice screencast, I never thought that zoom effect from Tweetie could be simulated with webkit transforms. Informative and inspiring if using TED mark system :)

David Martin said on April 23, 2009

Now that you have used both Titanium and Air I'm curious what differences you've noticed between the two. Pro's/Cons' to each system? Other than Titanium being released under the apache public license.

Chris said on April 23, 2009

Thanks for another interesting screencast, I have been using some subtle webkit effects on my site. I didn't know about that zoom effect, its really nice!

Dean said on April 23, 2009

Nice screencast, now if all web browsers would kindly drop their existing engines and just use webkit instead then we could all celebrate.

I've also been looking at titanium as a possible alternative to using Fluid.app for a desktop version of Hahlo, but given that Hahlo is entirely php its not really suitable yet (all I'd be using it as is a glorified web browser, in which case I may as well continue using fluid)

Also its workth noting that the custom webkit scrollbars appear to have no effect on the main window scrollbars, only scrollable elements within it. Bit of a shame.

Frank said on April 24, 2009

What amazing stuff you can do in an hour. Thanks for sharing!

Jonathan Snook said on April 24, 2009

@Matthias: I've uploaded the demo file. [note, this URL is likely to expire]

The screencast was done with Screenium and then used Handbrake to convert the files.

Sam Soffes said on May 05, 2009

Wow, this is amazing! Amazing how far CSS is coming. I like how it fires a javascript even when it's done. Pretty cool.

susan said on March 15, 2011

great stuff. didn't know about the webkitTransitionEnd listener. thanks for sharing.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.