Nowadays, it seems like you can’t escape it. Web designers, UX professionals, and even that cousin of yours (who is still perfecting his startup proposal) are all doing it… resizing your webpage! With the advent of responsive design, this habit is hard to break for some. We’ve seen some creative approaches that are having some fun with this, and we wanted to try out some new tricks too. We’ve created a fun Sass file that has a more light-hearted approach — all without the need of JavaScript! Go ahead, resize your browser and check out our header image!

The Scoop

This code snippet uses Sass and a tiny bit of HTML to create some flip book magic! You’ll just need a little bit of knowledge about Sass and Grunt to start shaking things up. Here’s how it’s done:

Step 1. Download the Project

You can download the .zip file here with the project. your terminal and make sure you “cd” into the project folder. This is a Sass function so you’ll need a couple common things to get started. Make sure you have npm installed on your machine and run npm i or sudo npm i. If you don’t have npm set up, hop on over to https://nodejs.org/to install the latest version. This will get Grunt all set up and ready to compile your sass. Go ahead and run the command grunt to get it started!

Step 2. Selecting your Animation

Here at ZURB, we know how important a well-timed gif can be. This may be the most difficult part of this whole process. We understand. Take your time, find the gif or animation you want to use and then come on back...

Got the animation?

Awesome! Now you just need to export it as a series of images and save them in the img folder. The naming convention is as follows:

The more images added can make for a smoother animation, however it does add to the file size. This is, of course, an open source project, so you can like totally change this format in the code if you’d like.

Step 3. Play with “_flip.scss”

Check it out! This is where the magic happens!

We’ve added a handful of variables that help control your flip book animation. The demo version is currently using a “walking” animation donated by the awesome folks over at ThinkMojo.

We’ve also included the classic running horse animation as well. To switch it out, you can change the $animation-name to 'horse' and update the $number-of-slides to 32. You should see now see a horse galloping through the scenic mountain range!

One awesome trick we included was an added a CSS preloader on lines 25-36. This goes through all of the slides and loads all of the images on an invisible pseudo element on the body tag. This fakes an image load, so that the animations are buttery smooth. It’s a bit of a hack and some browsers weren’t too happy about it, so for now it’s only used on webkit browsers.

Step 4. Let’s See Whatcha Got!

We’d love see the creative ways people use this! Fork this branch: https://github.com/zurb/css-flip-book and show off what you’ve done! We might just send a gift your way.