Skip to content
flip-book-cover

React Flip Book Animation

February 08, 2019

In today's post I will be walking through a simple example of how to use React to create a flip book style animation. Just like in school with a notebook full of doodles we will only be creating the illusion of movement but hey it's still pretty fun.

The Scenario

Recently while developing the wedding page for my wife's photography company we decided that it would be nice to add a little bit of movement to give it a more lively feel. We agreed to add a fun yet rudimentary image sequence showing a wedding couple displaying a range of emotions. Easy peasy, right? Although it seemed easy enough I quickly realized that the go to options of gifs and videos each have their own unique drawbacks and quirks.

Using a Gif

970q59mg168z

Pros

  • Uses a regular old <img> tag
  • Can be manipulated or stretched like other images on the web
  • It just works

Cons

  • Huuuuuuuge file size
  • Terrible quality
  • Internet circa 1999

Using a Video File

video editor

Pros

  • Better quality
  • Smaller file size
  • Uses a somewhat newer <video> tag

Cons

  • Fixed aspect ratio
  • Not as malleable as an image
  • Cross browser behavior is similar but not always the same
  • Mobile behavior can sometimes be a concern

React to the Rescue

So while 9 times out of 10 I would recommend sticking with a video it didn't meet my particular requirements. For my design to work I needed something that could be stretched and construed using the object-fit property. So I decided to create a simple react component. My component needed to take an array of images as a prop and then loop through them to create a moving picture all while retaining the benefits of regular still images on the web.

Edit React Flip Book - Basic

Further Enhancements

Well that is pretty cool and it certainly works but there is always room for improvement. How about we display a preview image first and wait until all the images are loaded before starting the animation? We can also add a speed prop for added flexibility.

Edit React Flip Book - Enhanced

Conclusion

So does this post prove that your $3,000 MacBook Pro can make animations just as good as a sticky pad? Haha well yes, but it is also a friendly reminder that React makes it quick and easy to create your own unique solutions to silly problems on the web. Oh and if I want to use this solution anywhere else on the site I now have a nifty FlipBook.js component ready to go.

Discuss React Flip Book Animation on Twitter

Next

Inclusive Design