Posted on

Infinite background-image animation loop

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.

Spam Sorting Machine

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.


(function conveyorLoop() {
$('.big-spam-sorter–comments-left, .big-spam-sorter–comments-right').animate({
'background-position-x': '+=102'
}, 8000, 'linear', conveyorLoop);
}());

view raw

conveyor-belt-animation-noff.js

hosted with ❤ by GitHub

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-x and background-position-y. So I was trying to animate a property that couldn’t be animated.

My Solution

The solution was simple. Just remove -x from the background-position property and viola. My final code:


(function conveyorLoop() {
$('.big-spam-sorter–comments-left, .big-spam-sorter–comments-right').animate({
'background-position': '+=102'
}, 8000, 'linear', conveyorLoop);
}());

view raw

continuous-background-animation.js

hosted with ❤ by GitHub

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.


.big-spam-sorter–comments-left,
.big-spam-sorter–comments-right {
height: 72px;
position: absolute;
bottom: 150px;
width: 1000px;
-webkit-transition: background-position 8000ms linear;
-moz-transition: background-position 8000ms linear;
-o-transition: background-position 8000ms linear;
transition: background-position 8000ms linear;
}

view raw

conveyor-belt-animation-css.css

hosted with ❤ by GitHub


(function conveyorLoop() {
$('.big-spam-sorter–comments-left, .big-spam-sorter–comments-right').css({
'background-position': '+=102'
});
// call function again after same
// interval as the CSS transition
setTimeout( conveyorLoop, 8000 );
}());

view raw

conveyor-belt-animation-css.js

hosted with ❤ by GitHub

Using CSS is the only way I found to animate on both the x and y axis. But I couldn’t figure out how to keep it in a continuous loop, for example continuously moving an image diagonal. If you know of a way to do that, whether it’s via CSS or Javascript, feel free to comment below or get in touch [http://twitter.com/danhauk](on Twitter).

7 thoughts on “Infinite background-image animation loop”

  1. That’s very cool. Would something like this work with just css
    .big-spam-sorter--comments-left,
    .big-spam-sorter--comments-right {
    -webkit-animation: slide 2s linear infinite;
    -moz-animation: slide 2s linear infinite;
    animation: slide 2s linear infinite;
    }
    @-webkit-keyframes slide
    {
    0% {background-position: 0 0;}
    100% {background-position: 100px 0;}
    }

    @-moz-keyframes slide
    {
    0% {background-position: 0 0;}
    100% {background-position: 100px 0;}
    }

    @keyframes slide
    {
    0% {background-position: 0 0;}
    100% {background-position: 100px 0;}
    }

    Like

    Reply

    1. I explored @keyframes briefly, but the problem that I came across is that I can’t incrementally increase the background position to continue the movement.

      In your example the comment bubbles would move 100px to the right, then move back to their starting position at 0. Instead of continuing to move to the right as if on a conveyor belt, they would just move back and forth.

      This is why I used jQuery to move the background position since I can use '+=102' to move the background by 102px regardless of current position.

      Like

      Reply

Leave a comment