Sprite-sheet Animation using HTML & CSS

Animation like Home page of Dropbox site.


Many of us might have been seen the Sketch animation of Dropbox’s Home-Page. I was feeling Wow, after observing that animation.
At first glance it seems to be a GIF, but the performance and color quality made me, to check the HTML code of Dropbox, and I found it was a very traditional way but in completely new blend.

It is Sprite-Sheet Animation. I decided to mimic the same animation using HTML, CSS.

I have used the same Resource Sprite, used by Dropbox. So Thanks to Dropbox, too!! ☺

I found the Image URL from code, https://cf.dropboxstatic.com/static/images/index/animation-strips/hero-intro-bg-vflR5rUow.jpg It is a long horizontal Image strip, made up of total 48 frames, placed side-by-side.

Data

Total Width : 39360px
Total Height : 312px
Total Frames : 48
Width of a Frame : 820px
Height of a Frame : 312px

Now, let’s understand the logic first.
Our aim will be to move Sprite Sheet from Right to Left, that means its offset will be changed from 0px to the right most side of Strip, i.e -39360px.
Another thing, that we have to achieve, is to complete this translation in 48 Step, because this strip contains total 48 frames.

HTML

Lets first code the HTML.

Up to now, there is nothing new. I have just linked CSS file and have added a Div “animatedDiv” to display actual animation, that’s it!


CSS

Now its turn of CSS. CSS is going to perform very simple but, an important role.
Let me show you CSS first,

As a basic style for AnimatedDiv, I set its height as 312px(Height of Frame) and width equals to 820px(Width of a Single Frame).
Along with it, I set our Dropbox sprite sheet image as its background-image. Initially background-position of an image should be 0px, i.e. Left most edge as an origin.

Now it's time to apply animation, for that I created animation blocks as per the browser support. This block will give Translation animation to Background-Image, as I said, initially it will be 0px, and at the end of animation it should reach to the right-most edge.

In simple terms, It will be From 0px to -39360px(Total Width of Sprite-sheet image). This animation block will animate the image in loop, and in total steps of 48, because we have total 48 Frames in single SpriteSheet of Dropbox.

That’s It !!