Flip animation
Tags: react, javascript, animation, beginners
Published: 2020-10-01 10:38:03

Web development was once about making the website functional; yet, this is no longer the case. Nowadays, it is about the user experience the websites provides. Nonetheless, websites that we design contain some UX inconsistencies like “jump cuts”. Those inconsistencies create some cognitive overload to the users. In other words, the designs are not very intuitive.

In this article, I introduce how you can create a smooth transition using Flip animation. Then, implement the Flip animation using react-flip-toolkit to create an aesthetically pleasing visual. Below is a sneak peek of the result.

![ezgif.com-video-to-gif.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1601462101120/I1I1y5vFb.gif)

Before jumping straightaway implementing a Flip animation, let us understand three basic things:
- What Flip animation is
- Why choose Flip over CSS animation
- Why opting for a Flip library like react-flip-toolkit

## Content

-  [Flip animation definition](#flip-animation-definition) 
-  [CSS animation over Flip](#css-animation-over-flip) 
-  [Why using a Flip library](#why-using-a-flip-animation-library) 
-  [Implement Flip animation using react-flip-toolkit](#implement-flip-animation-using-react-flip-toolkit) 
-  [Resources](#resources) 

## Flip animation definition

Flip is an acronym that was first introduced by Paul Lewis, which means First, Last, Invert and Play. I would not go in-depth about the reason behind those names. The key takeaway is that those are the steps required to create a Flip animation. An animation where the transitioning component scales or tweens to the final component.

## CSS animation over Flip

Usually, to implement any animation, people would use plain old CSS. That can be an option, updating the top, left, right, bottom position and then setting a transition time. But, this way has a considerable performance impact when rendering the web page. It will not be a surprise to find some glitches here and there. Contrarily, using JavaScript to apply a scale transition is more efficient.

## Why using a Flip animation library

As with every library that you use, it offers the advantage of not worrying about the underlying implementation. But, to rather focus on your own unique implementation.   Flip animation is not hard to implement, but the worst part is that we will need to handle every edge case. Edge cases like browsers compatibility and listening to browser window size changes. For this reason, I chose react-flip-toolkit. A library that offers greater flexibility when creating transitioning animation.  [Here](https://react-flip-toolkit-demos.surge.sh/) is a list of examples what you can achieve with react-flip-toolkit. Besides, it is also available for other JavaScript frameworks and JavaScript itself. But you will find it under different names.

## Implement Flip animation using react-flip-toolkit

First set up a new React project and add the react-flip-toolkit to it.

```npx create-react-app flip && cd flip && npm install react-flip-toolkit```

From there, open the React project in your favourite editor. Then head to the App.js file and remove any unnecessary lines. Add the `Flipper` component that wraps the transitioning component `SelectedMode`.

```
import React, { useState } from 'react'
import { Flipper } from 'react-flip-toolkit'

function App() {
    const [tweetMode, setTweetMode] = useState(false)

    return (
    <Flipper flipKey={tweetMode}>
        <MenuScreen />
        {
            tweetMode ? (
                <SelectedMode id={`${modeName}-mode`} mode={modeName}/>
            ) : null
        }
    </Flipper>
    )
}
```
For this example, I used a ternary operator to display `SelectedMode` or not to avoid the use of CSS.

The import bit in the code above is the `flipkey` attribute from the `Flipper` component. This is how react-flip-toolkit knows when to play the animation. The attribute can be of any type: boolean, string, number.

Next, create a SelectedMode.js file, which is the card mode the user clicks to view the list of tweets. Wrap the content of the screen around the `Flipped` component and add the `flipId` attribute to it. The value of the `flipId` attribute maps to the mode name for the two components that are changing. For example, the card with mode 'at-once' would have a `flipId` of `mode-at-once`. So will the `flipId` of `SelectedMode` component.
```
import { Flipped } from 'react-flip-toolkit'

function SelectedMode({ id, mode }) {
	return (
         <Flipped flipId={id}>
             /* Content of the screen displaying list of tweets*/
         </Flipped>
	)
}
```
Lastly, create the Card.js file and include the code below. You will notice that there is an `onClick` function to change the tweet mode. In this case, we used the React Context API to create a hook, as we will need to access this value in App.js to trigger the animation. For the brevity of the article, try to implement `useTweetModeToggle` by yourself. If you find any difficulties, feel free to have a look at my [GitHub repository](https://github.com/DinMon/show-me-your-tweets).

```
function Card({ mode, title, titleHighlight, description, descriptionHighlight}) {
	const toggleTweetMode = useTweetModeToggle()
	return (
        <Flipped flipId={`${mode}-mode`}>
            <div onClick={toggleTweetMode(mode)}>
                 /* Contents of the card mode*/
             <div>
         </Flipped>
	)
}
```

## Resources

-  [react-flip-toolkit GitHub repository](https://github.com/aholachek/react-flip-toolkit) 
-  [Talk about React and the FLIP Technique](https://www.youtube.com/watch?v=s06Z_e8ac0Y) 
-  [Flip animation article by Paul Lewis](https://aerotwist.com/blog/flip-your-animations/) 
-  [Examples of what is achievable using react-flip-toolkit](https://react-flip-toolkit-demos.surge.sh/) 

The example is from  [show-me-your-tweets](https://dinmon.github.io/show-me-your-tweets/), a web application I am working on for some weeks. There will be further articles coming based on it if you do not want to miss out, follow me on  [Twitter](https://twitter.com/din__mon)  or  [Hashnode](https://hashnode.com/@dinmon) .