<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Chromatic Pixel &#187; Animation</title>
	<atom:link href="http://blog.stephenhorlander.com/tag/animation/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.stephenhorlander.com</link>
	<description>Rambling thoughts on life and design.</description>
	<lastBuildDate>Thu, 01 Jul 2010 15:38:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Tab Animation</title>
		<link>http://blog.stephenhorlander.com/2010/01/29/tab-animation/</link>
		<comments>http://blog.stephenhorlander.com/2010/01/29/tab-animation/#comments</comments>
		<pubDate>Fri, 29 Jan 2010 11:41:41 +0000</pubDate>
		<dc:creator>Stephen</dc:creator>
				<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Animation]]></category>

		<guid isPermaLink="false">http://blog.stephenhorlander.com/?p=259</guid>
		<description><![CDATA[In addition to the UI and appearance changes we have been exploring for Firefox, we have also been exploring how to better improve the user experience through animation. One area that animation would be very beneficial is with tab interactions. Specifically moving/arranging tabs on the tab strip, closing/opening tabs and tearing off tabs into new [...]]]></description>
			<content:encoded><![CDATA[<p class="postBody">In addition to the UI and appearance changes we have been exploring for Firefox, we have also been exploring how to better improve the user experience <a href="https://wiki.mozilla.org/Firefox/Projects/animation">through animation</a>.</p>

<p class="postBody">One area that animation would be very beneficial is with <a href="https://wiki.mozilla.org/Firefox/Projects/Tab_animation">tab interactions</a>. Specifically moving/arranging tabs on the tab strip, closing/opening tabs and tearing off tabs into new windows. Presently the feedback here isn&#8217;t as good or as elegant as it could be.</p>

<p style="margin-bottom: 10px;">&nbsp;</p>

<h3>New Tab Animation</h3>

<p class="postBody">Some of the goals for animation are to make browsing feel faster, adding visual affordances that makes tasks more understandable and to make the browser more visually appealing. There is much more detail on the Wiki articles linked above. My goal was to quickly demo how this would actually look and feel because still images and wireframes can only convey so much.</p>

<p class="postBody">Click the image below for the animation that shows how a new tab animation could look. It&#8217;s pretty short and fast.</p>

<a target="_blank" href="http://www.stephenhorlander.com/images/blog-posts/tab-animation/animation-new-tab.html"><img src="http://www.stephenhorlander.com/images/blog-posts/tab-animation/play-new-tab-video.png" title="Firefox - New Tab Animation - Preview Link" alt="Firefox - New Tab Animation - Preview Link" class="thumbnailMedium" /></a>

<p style="margin-bottom: 10px;">&nbsp;</p>

<p class="postBody">It is hard to tell from the video how this would work frame by frame. The general idea is that after you click the new tab button that button itself grows into the new tab.</p>

<img src="http://www.stephenhorlander.com/images/blog-posts/tab-animation/new-tab-growth-frame-by-frame.png" title="Firefox - New Tab Animation - Frame-by-Frame" alt="Firefox - New Tab Animation - Frame-by-Frame" class="thumbnailMedium" />

<p style="margin-bottom: 10px;">&nbsp;</p>

<h3>Tab Tear Off</h3>

<p class="postBody">This demo shows both tab rearrangement and tab tear-off.</p>

<a target="_blank" href="http://www.stephenhorlander.com/images/blog-posts/tab-animation/animation-tab-tear-off.html"><img src="http://www.stephenhorlander.com/images/blog-posts/tab-animation/tear-new-tab-video.png" title="Firefox - Tab Tear-Off Animation - Preview Link" alt="Firefox - Tab Tear-Off Animation - Preview Link" class="thumbnailMedium" /></a>

<p style="margin-bottom: 10px;">&nbsp;</p>]]></content:encoded>
			<wfw:commentRss>http://blog.stephenhorlander.com/2010/01/29/tab-animation/feed/</wfw:commentRss>
		<slash:comments>87</slash:comments>
		</item>
	</channel>
</rss>
