Responsive sprite animation with ImageMagick and GreenSock

CSS sprites are not new. From the moment they were popularized on A List Apart in 2004, simple sprites have become the main technique in the toolkit of most web developers. But, despite the fact that the advantages of speed sprites are quite clear, their use in modern web development is rarely discussed. The principle remains the same: it is a combination of several images into one “main” graphic element, from which only certain parts are displayed at a time.

In this article, we will look at an easy way to create responsive CSS sprite animations that weigh little, display well on mobile devices, and even are interactive. You don't need any special graphic editors, just a little understanding of CSS and JavaScript. Let's get started

Sprite creation

Sprites came out of the world of video games, so we will pay tribute to the heritage and animate Ryu from Street Fighter. Of course, the original belongs to Capcom.

We need to combine each frame of our animation into one image. There are dozens of tools that can help you create sprites, most of which can even generate auxiliary style sheets. The built-in functions for creating sprites in Compass are extremely efficient, and SpritePad is a great example of a web version of the generator. For our purposes, however, a simple command line will suffice.
')
ImageMagick , the “Swiss Knife” for image processing, is a free, open-source image management tool that is great for automating tasks that can be quite laborious, for example, for combining images. ImageMagick is also available for almost every operating system. Mac users can install it through Homebrew , Windows followers can download the installer from the official site, and Linux fans probably know what to do without me.

Save frames of your animation that have the same size in a folder as a sequence of PNG files. Call the command line terminal, go (cd) to the directory where your images are stored, and run the following command:

convert *.png -append result-sprite.png 

This command instructs ImageMagick to vertically tie all .PNG files in our directory (since “*” is a special character) into one full sprite called “result-sprite.png”. This is a graphic element that will be used as a background image (background-image) in the CSS for the element that we want to animate, changing its position to loop all frames in order.

Pure CSS Animation

We'll start with a simple one and animate our sprite with a CSS3 keyframe animation. If you are not familiar with the basic syntax, the article by Louis Lazaris on Smashing Magazine is a good introduction. We are going to animate the vertical positioning of the background (background-position) of our element from 0% to 100% (from top to bottom), using each frame in turn.

If you allow the animation to be performed in one continuous sequence as a standard behavior, our sprite will be used between frames, which will break the illusion. However, using the steps () function, we can control the number of displayed keyframes. Due to the fact that the background-position is valid when determining as a percentage, we need to set the number of steps one less than the total number of frames in our animation.

Experiment with this code in CodePen to make sense.

Notice that we have defined the width (width) and height (height) of our element so that they clearly correspond to the general frame, and to avoid the exit of the previous or subsequent frames. We used abbreviated notation to set the number of animation iterations (animation-iteration-count) as “infinite”, and the animation duration (animation-duration) was 3.5 seconds, and so it turned out that Ryu was throwing out his combo “hit - throwing a foot-hoad "before the expiration of time.

Yes, he is far from ideal. Try to change the height of our element "Ryu" or apply a background-size to our sprite, and the effect will be broken. Our animated element is not yet responsive and depends on clear dimensions based on pixels.

Making it responsive

If we want to freely resize our animated sprite, we have two options. The key to both options is the dependence of our sprite on the exact aspect ratio, and not on a certain size. We must keep its proportions so that it increases and decreases correctly.

The first option is to set the size of the background of our sprite to 100% of the width of our element, convert the width and height of our element from pixels to em, and then change the font-size of the base font size accordingly. This will help to achieve the desired effect and can work in most cases, but will not give real fluidity.

Our second option is to use a fixed-aspect ratio technique based on pure CSS by Mark Hinze, which uses a percentage indent in the pseudo-element, which preserves the proportions of the element at any size. This approach is used in the demo below and gives our sprite a flowing width at 70%. Responsive Ryu .

This is an easy and mobile-adapted way to achieve responsive frame-by-frame animation effect. Browsers are great at supporting CSS animations, with the result that the only limiting factor is a CSS3 keyframe. Include the appropriate vendor prefix -webkit-, and the effect will work in all modern browsers, including IE10 and higher.

Javascript animation

And if we want more precise control over our animation, which in principle is possible using the CSS3 keyframe syntax? Suppose that instead of a single looped animation, we want to include several sprites in one complex scene and attach the functions of triggers and time to the position of the scroll bar.

To make this possible, we need to animate our sprites with JavaScript, using the full power of the GreenSock animation platform and the excellent library of Jan Papke's ScrollMagic . For those who are not familiar with this great combination, the official ScrollMagic demos will be a great start.

These are powerful tools for which a whole series of lessons have been written. As an example, in order not to go into details on how ScrollMagic works, we will demonstrate some of the time functions available to us. The basic principles of sprites remain the same as in our CSS animations.

First, let's call a 2-second animation at a certain scroll position. It should end with the last frame and play in the reverse order when scrolling backwards (even if it will play halfway). We will continue to adhere to the theme of video games and use the sprite from the classic strategy of Westwood Studios - Red Alert, which is now available for free.

Demonstration.

Please note that we use the aforementioned method of specifying dimensions based on em; Try to change the font size, reducing or increasing the sprite. We defined the twin of TweenMax.to, setting the value of the vertical position of the background of our element as 100%, and used the SteppedEase method to achieve the required frame-by-frame effect.

Let's move one step further. We synchronize our animation with the scroll position, using the scroll bar as a playback slider.

Demonstration.

The sprite remains in a fixed position for the duration of the animation, which is now controlled by the user's scrolling behavior. To achieve this effect, we set the ScrollMagic.Scene property to a duration of 1500 pixels and used the setPin method to fix the parent element to complete the picture. A more detailed description of these techniques is given in the documentation on the ScrollMagic website.

Browser support for sprite animations based on JavaScript is even better than our version only in CSS. ScrollMagic and GreenSock are supported by all modern browsers, including IE 9+, with automatic processing of browser prefixes and flaws. Mobile support is also good; These techniques work on iOS 8+ without special workarounds, including redrawing on the go, and no loss of scrolling speed.

Conclusion

We outlined rather superficially what possibilities the combination of responsive CSS sprites with advanced scrolling animation offers, but I hope that we inspired the rest to start experimenting.

And in the end, as Rachel Sets said, “animate responsibly.” If something can be animated, it is not necessary to animate it. And if you really chose animation, do it consciously, beautifully and rationally.