Animating images with CSS? Easy!
Top

A few weeks ago we were asked to create a website (strange, right?) and aside from being provided with designs we were also given animation prototypes. After taking a quick look, my first thought was “Oh my… is this even possible?”. Let me guess, your first thought would be “Oh, canvas, cool”, and that’s what we thought, boy were we wrong.

Our first step was to find similar animations on the web and someone suggested using GreenSock. For those of you who don’t know, it’s a JS library, perfect for creating animations via SVG and canvas. At first it seems quite complicated for a task like this, so I started searching for similar ones. It was not easy. In all honesty, Google is filled with cool and very complex images, but that day I got lucky and found a simple CSS animation based on transforms. Later we ended up using this idea to create all the requested animations.

google

What did I learn?

  1. GreenSock is a cool library but a little bit overloaded for animations with images.
  2. Don’t know how to solve the problem? Google it. Sometimes it’s much faster and easier than asking your colleagues.

The second step was to create the first prototype and provide at least a lightweight estimate for other animations. In the first step, I found an example which gave me a basic understanding of this idea. It wasn’t really similar to the animations we were working on, but this idea let me know that it’s possible. The first prototype was created in about 2 days. It was unresponsive and not exactly what was provided in the prototype. Moving forward, we needed to create a responsive animation.

beforeafter

The third step started with refactoring the animation. The main idea was to set the background-image and animating the transform: translate3d(x, y, z) properties. Purpose of this step was to create 4 animations and assemble them into an accordion. The accordion was another headache because I didn’t find anything suitable; while my colleague was helping me with the accordion I was animating. After our first success, rest animations took me 1 day to create. It wasn’t over just yet, as it was another headache to assemble them into one module. Finally, it was done. And it was quite similar to the prototype. Example of this accordion with the source code can be found here.

What did I learn?

  1. Recreating the animation based on the prototype means hard-coding. You will get numbers like background-size: 120.75% 141.18%; Yep, magic numbers. But slicing the image in parts and preserving its sizes is magic.
  2. The main idea of animating images is to slice it in parts, calculate sizes, and use transform. That’s all. Nothing hard.
  3. To be honest, I don’t really like the animations in this part. They are small and finally, the client decided to turn them off on mobile phones.
  4. Don’t think too hard about animations. Instead of using overloaded JS libraries try using CSS. You would definitely be surprised by the performance and browser compatibility.
  5. If you animate many elements or animate lots of properties – the animation can start flickering, but there is a solution. Tell the browser about properties you want to change. The CSS property will-change tells the browser what will be changing so it would be more optimized. And if you still have problems with performance – consider using translate: transformZ(0).

Finally, we had to create an accordion-like animation on the background of the hero section. We developed one animation using duplicates of the same image. In fact, they had the same logic. Split into lines, move up, move right and split into rectangular. And all of those prototypes were for very different sizes. So I started creating the hero animations. As I thought it was quite impossible just to transfer first ones. So with animating experience behind the next animations were started.




Well, I guess you’re a little bit tired. Take a break and have a look at those animations. And then come back, please :3

Hero#1Hero#2Hero#3Hero#4

Conclusion

To be honest, these animations weren’t hard to create. Slicing images and transforming them. That’s all, however, there was another problem. These animations are quite big and they started flickering, especially on iOS devices. Will-change and transformZ(0) helped me with that as well, but one animation used the transition for the background-position and transform. As I understood, these properties can’t be used for bg-image simultaneously. The transition of background-position forces browsers to re-render (as we think) the image so it’s flickering. By the way, it was an animation with 8 parts. The solution was quite easy. Add an additional wrapper for parts and move them like moving the background. This solution gave me the performance I needed and made the animation smooth on all devices.

If you’re still reading – thank you. This article doesn’t have much technical information about the creation process, but in the end, the source code isn’t very big. This article is just a small description of my thoughts and describing problems that took quite a lot of time to resolve.

You can change an image in Codepen and animate it yourself 🙂 or you can be inspired by these animations and create your own.

up

Please turn your device