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?
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
'horse' and update the
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.