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. 👇
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
- Uses a regular old
- Can be manipulated or stretched like other images on the web
- It just works
- Huuuuuuuge file size
- Terrible quality
- Internet circa 1999
Using a Video File
- Better quality
- Smaller file size
- Uses a somewhat newer
- 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.
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.
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.