<?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>Fri, 02 Sep 2011 19:19:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Weekly Design Status Update</title>
		<link>http://blog.stephenhorlander.com/2011/08/weekly-design-status-update/</link>
		<comments>http://blog.stephenhorlander.com/2011/08/weekly-design-status-update/#comments</comments>
		<pubDate>Fri, 19 Aug 2011 21:48:19 +0000</pubDate>
		<dc:creator>Stephen</dc:creator>
				<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Animation]]></category>
		<category><![CDATA[Mac]]></category>
		<category><![CDATA[Progress Report]]></category>
		<category><![CDATA[Theme]]></category>
		<category><![CDATA[Windows]]></category>

		<guid isPermaLink="false">http://blog.stephenhorlander.com/?p=491</guid>
		<description><![CDATA[This week in Firefox visual design: Updated Windows 7 version of LocationBar results designs&#160; Exploration of named Search Engine button treatment (mostly interactive): Animated Button 01 Animated Button 02&#160; Download Panel Design Specs in HTML/CSS for the great work Paolo is doing on Bug 564934&#160; Download Added Animation ideas (now with CSS Animations!) Animate Enlarging [...]]]></description>
			<content:encoded><![CDATA[<p class="postBody beforeList">This week in Firefox visual design:</p>
<ul>
	<li>Updated Windows 7 version of <a href="https://wiki.mozilla.org/images/a/a8/LocationBar-Results-i01.jpg">LocationBar results designs</a><br />&nbsp;</li>
	
	<li>Exploration of named Search Engine button treatment (mostly interactive):</li>
	<ul>
	  <li><a href="http://people.mozilla.com/~shorlander/searchEngineButton/search-button-color-02.html">Animated Button 01</a></li>
	  <li><a href="http://people.mozilla.com/~shorlander/searchEngineButton/search-button-color-03.html">Animated Button 02</a><br />&nbsp;</li>
	</ul>
	
	<li>Download Panel <a href="http://people.mozilla.com/~shorlander/download-panel-specs/download-panel-specs.html">Design Specs in HTML/CSS</a> for the great work Paolo is doing on <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=564934">Bug 564934</a><br />&nbsp;</li>
	
	<li>Download Added Animation ideas (now with CSS Animations!)</li>
	<ul>
	  <li><a href="http://people.mozilla.com/~shorlander/download-added-animation/download-added-animation-02.html">Animate Enlarging Arrow</a></li>
	  <li><a href="http://people.mozilla.com/~shorlander/download-added-animation/download-added-animation-01.html">Animate Dropping Arrow</a><br />&nbsp;</li>
	</ul>

	<li>Add-ons <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=591780">Dictionary Icons</a><br />&nbsp;</li>

	<li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=667456">Lion Theme Improvements</a></li>
	<ul>
	  <li><a href="http://markusstange.wordpress.com/">Markus</a> landed mac-lion-theme metric: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=679717">Bug 679717</a></li>
	  <li>Patch for improving Lion icons: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=679708">Bug 679708</a></li>
	  <li>Patch to fix fuzzy large buck button: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=679771">Bug 679771</a></li>
	  <li>Filed bug for adding texture to additional toolbars: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=680247">Bug 680247</a></li>
	  <li>Filed bug for updating Lion sidebars: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=680256">Bug 680256</a></li>
	  <li>Should look closer to this soon:<br /><a href="http://www.stephenhorlander.com/images/blog-posts/weekly-updates/updated-lion-glyphs-02.png"><img src="http://www.stephenhorlander.com/images/blog-posts/weekly-updates/updated-lion-glyphs-02.png" width="500" title="Lion Theme Updates" alt="Lion Theme Updates" /></a><br />&nbsp;</li>
	</ul>

	<li>DevTools</li>
	<ul>
	  <li><a href="https://bug663833.bugzilla.mozilla.org/attachment.cgi?id=554557">UI-Review and specs</a> for Highlighter InfoBar</li>
	  <li>Working on overall design specs for Developer toolbar: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=676255">bug 676255</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=676253">bug 676253</a><br />&nbsp;</li>
	</ul>

	<li><a href="https://wiki.mozilla.org/Firefox/Features/Theme_Refinement_and_Evolution">Australis (Theme Refresh)</a></li>
	<ul>
	  <li>Lagging behind on this a bit due to some more immediate stuff. Going to finish up initial designs and populate the Feature page next week.<br />&nbsp;</li>
	</ul>

</ul>
]]></content:encoded>
			<wfw:commentRss>http://blog.stephenhorlander.com/2011/08/weekly-design-status-update/feed/</wfw:commentRss>
		<slash:comments>27</slash:comments>
		</item>
		<item>
		<title>Tab Animation</title>
		<link>http://blog.stephenhorlander.com/2010/01/tab-animation/</link>
		<comments>http://blog.stephenhorlander.com/2010/01/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/tab-animation/feed/</wfw:commentRss>
		<slash:comments>88</slash:comments>
		</item>
	</channel>
</rss>

