This post was originally made on the Assanka blog. Assanka was acquired by the Financial Times in January 2012, and became what is now FT Labs. Learn more.
To produce the CSS3 ticker plugin for jQuery that I’ve been working on recently, I used CSS3 transitions. These are the magic new properties in CSS that make a browser animate elements without using JavaScript.
The logic for implementing native animations in the browser is a no-brainer, particularly if you try and use a site that implements scrolling tickers by incrementing an element’s left or margin-left properties every few milliseconds. Watch your interactions with the rest of the page slow down to a sluggish crawl and realise that animating the positioning of DOM elements in JavaScript can sometimes be pretty slow.
With animation increasingly important to creating rich and usable user interfaces, the chance to start optimising the performance of animation in the browser via native implementation is a great step forward. Unfortunately, this is currently only supported by Webkit based browsers. In developing the ticker, I wanted to see if support in Firefox would be possible.
From version 1.9.3 of Gecko, the -moz-transition family of CSS properties have been added, so I tried grabbing the latest version of Minefield (the pre-release codename for Firefox) and running the ticker plugin.
It doesn’t work. Specifically, it doesn’t work for these reasons:
- It doesn’t seem to be possible to act on position properties.
left,right,topandbottomdo not appear to animate. It might be possible to work around this by switching to animating margins rather than absolute positioning, but hopefully it will be possible to animate these before the Firefox 3.7 release. - It doesn’t appear to fire the
mozTransitionEndevent, which you’d expect from a full implementation of the standard. As a result, my ticker can’t loop. - It doesn’t seem to be possible to change animation properties (such as the duration) from JavaScript. I need this to disable animation while repositioning the ticker for the next loop.
This is clearly an early pre-release version, and it’s encouraging to see support starting to emerge from the Firefox camp. I think I might have retired by the time this kind of feature hits Internet Explorer!