Creating A Flip Book Animation With React

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. Before diving into the nitty-gritty let's review the real life scenario that inspired this post and why it showcases the power and usefulness of React. Below is a screen recording of the final product. 👇

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

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

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.

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.

Conclusion

flip-book-cover

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.