After I redesigned the “How Does Akismet Work” page, I realized the spam sorter graphic was just itching to be animated. Converting the main machine box into a gif with some flashing lights was easy enough. The conveyor belt is what gave me some trouble. I’m posting my solution here because the bug I came across was something so simple to fix and I just didn’t see it.
This should be easy
The effect was to have the comment bubbles move left to right as if they’re going through the machine. Since this entire graphic is composed of empty divs with background images in the HTML (this was done in order to make the conveyor belt repeatable and expand to the edge of the browser regardless of size), making them move was a simple matter of changing the background-position.
Easy, I’ll just use a simple
.animate() on the comment bubbles.
Perfect! Now to do some cross-browser testing.
Uh oh, Firefox
Next step was to jump over to Firefox to make sure it worked before committing the changes. Here’s where I ran into the problem, it didn’t work in Firefox. I racked my brain and did some searching to figure out why it would work perfectly in Chrome but not in Firefox.
It turns out (and I think I knew this already at some point) Firefox doesn’t support
background-position-y. So I was trying to animate a property that couldn’t be animated.
The solution was simple. Just remove
-x from the background-position property and viola. My final code:
Why not use CSS transitions?
I was originally going to go the route of using CSS transitions, but I wanted more browser support, particularly IE9. If you want to use CSS transitions instead of the jQuery
.animate() function here’s what I was using.