
This is a simple and effective way to create an add to cart animated button in Ionic React with **Ionic Animations** which uses the Web Animations API.

If you're not familiar with either of these, I would definitely take a look at the [official Ionic Animations docs](https://ionicframework.com/docs/utilities/animations) and even have a read about the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) as well before we get started.

The example that I'm going to take you through today is to add a nice visual effect to our mobile application to make it seem as if a _cart_ icon on an **Add to Cart** button is floating upwards.

There are some benefits of including something like this into an app such as a [E-Commerce App](/ionic-react-ecommerce) or a [Food Ordering App](/ionic-fast-food-ordering-app);
* Immediately informs the user of interaction
* Visual aid that the item/product has been added to cart
* Improves the user experience (UX)

You could also take the technique and idea used in this example and apply it elsewhere for other effects.

## CreateAnimation Component
For this example, we will be using the **CreateAnimation** component. This is a wrapper-style component imported from `@ionic/react` and it allows us to wrap another component/element in the animation to apply that animation to it.

```jsx
import { CreateAnimation } from '@ionic/react';
```
### Properties
This component takes in props in order to build up the style, type and options for the animation. You can see all of the available methods and props [here](https://ionicframework.com/docs/utilities/animations#methods). Today, as part of this example, we are going to focus on a few specific properties;

- `duration(duration?: number)`
	- Set the duration of the animation in milliseconds.
- `iterations(iterations: number)`
	- Set the number of times the animation cycle should be played before stopping.
- `fromTo(property: string, fromValue: any, toValue: any)`
	- Set the start and end styles of the animation. The property being the CSS property, e.g. *translate* or *color*.
-	`easing(easing?: string)`
	-	Set the easing of the animation in milliseconds. See  [Easing Effects](https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/easing#Value) from the Web Animations API docs for a list of accepted easing values.

We will also be making use of the `play()` method which is used to *Play the animation*.

### Other ways

There are other ways to use **Ionic Animations** in Ionic React other than using this wrapper component. However, I will only cover this way in this post. If wanted, you can refer to the docs to see the programmatic approach of attaching an animation to an element and using the `createAnimation` and `addAnimation` methods. In my experience and my own opinion though, this is a very clean, effective way of adding animations using Ionic Animations.

## Getting started
So now that we've covered the **CreateAnimation** component and the properties it accepts as well as a brief overview of the properties we are going to focus on, let's get started.

### Other components needed
As we are creating a button to "Add to Cart", there are two other obvious components we will need to import into our application, these are the **IonButton** and **IonIcon**.

```jsx
import { CreateAnimation, IonButton, IonIcon } from '@ionic/react';
```
### Icon needed
We can easily import a nice icon from the [Ionicons](https://ionic.io/ionicons) icon library. To keep in context with our example, we can use the **Cart** icon.

```jsx
import { cartOutline } from "ionicons/icons";
```

### Hooks needed
We will also make use of **React Hooks** for this implementation to minimise javascript code and to make our code a lot cleaner and efficient, these are the **useRef** and **useState** hooks.
```jsx
import { useRef, useState } from 'react';
```

The `useState` hook will be used to control the display property of the animated icon and the `useRef` hook we will use to *reference the animation component*.

### Setting everything up
We have everything we need imported now to start into our component. We will be using a functional component in this case, and in my opinion is the best practice. As we are creating a specific button for this use case, we need to give the user the ability to specify a custom click or a callback for after the animation has happened, such as *the actual add to cart* functionality.

```jsx
const AddToCartButton = ({ customOnClick = null }) => {

	const animationRef = useRef();
	const [ hidden, setHidden ] = useState(true);
```
We've now got our component set up with a prop being passed in called **customOnClick**. This will represent the further functionality that will be executed *after* the animation as well as the ref and state variables.

### Building our animations
With the CreateAnimation wrapper component, we can either specify the properties outlined above directly as props on this component, or define them inside our functional component and later pass them in. In my opinion the latter is cleaner as it gives you more oversight over everything.

First, we need a style to append on to our animated icon, let's call this **floatStyle** and set it's position and display CSS properties.
```jsx
const floatStyle = {

	display: hidden ? "none" : "",
	position: "absolute"
};
```
Next, we will start defining and building our animations with options using the properties I talked about above. We are going to add 2 animations to our icon.

I have split the two animations out into their own objects so it's easier to understand what's going on here, but we merge them later in the **fromTo** property as you'll see.

In this **floatGrowAnimation** we are manipulating the `transform` CSS property of this element and changing the `translateY` and `scale` values. This will essentially make our icon move upwards and get slightly bigger.
```jsx
const floatGrowAnimation = {

	property: "transform",
	fromValue: "translateY(0) scale(1)",
	toValue: "translateY(-55px) scale(1.2)"
};
```
This **colorAnimation** is going to change our icon from white to the primary Ionic **CSS variable color**.
```jsx
const colorAnimation = {

	property: "color",
	fromValue: "white",
	toValue: "var(--ion-color-primary"
};
```
Now, we can create our main animation object specifying a **duration** of 700 milliseconds, 1 iteration, set our easing option and house the 2 animation **fromTo** objects in the **fromTo** array.
```jsx
const mainAnimation = {

	duration: 700,
	iterations: "1",
	fromTo: [ floatGrowAnimation, colorAnimation ],
	easing: "cubic-bezier(0.25, 0.7, 0.25, 0.7)"
};
```
### Click event handler
We also need a function which handles our click event of the main button we are going to build. This function will take care of the icon display property using the state variable, play the animation and execute the **customOnClick** function that was passed in as a prop if there is any.

```jsx
const handleClick = async () => {

	setHidden(false);
	await animationRef.current.animation.play();
	setHidden(true);
	customOnClick && customOnClick();
}
```
So, we're achieving a few things here;
1. We set the state variable **hidden** to **false**.
2. Using the `play()` method, we can call it on the animation of the current element attached to our **animationRef** (which you'll see below in our return).
3. Hide the icon again, so it's ready for the next animation.
4. Execute the **customOnClick** function is there is one.

### Return (rendered components)
This is our final return method with our components.
```jsx
return (
<div className="button-container">
	<IonButton color="primary" className="custom-button" onClick={ handleClick }>
		<IonIcon icon={ cartOutline } />
	</IonButton>

	<CreateAnimation ref={ animationRef } { ...mainAnimation }>
		<IonIcon icon={ cartOutline } size="large" style={ floatStyle } />
	</CreateAnimation>
</div>
);
```
Wrapped in the **CreateAnimation** component is a second **IonIcon** component which will serve as our animated icon, outside of the button, to make it appear as if it's floating and animating away from the button. We've spread our **mainAnimation** object passing it's properties as props.

And that's pretty much it! You'll see I've applied some custom classes above to the containing div and the button, feel free to play around with your own, depending on your preference or you can check out the Github repo below for my implementation!

[Here is a link to my implementation of this specific component in an Ionic App.](/ionic-react-add-to-cart)

![Add to cart implementation](https://strapi.alanmontgomery.co.uk/uploads/Add_To_Cart_dfb28fca39.png)

If this has helped you understand Ionic Animations a little bit, or the CreateAnimation component, or if you've implemented this add to cart button into your own app then let me know! **Feel free to reach out on Twitter**.

I look forward to the next one 🎉.

Blog

Blog posts about Ionic, Capacitor, Javascript, React and Mobile App Development

Blog posts with tag
Animations

Animations

Using Ionic Animations to create an add to cart animated button in Ionic React

Blog

Blog posts about Ionic, Capacitor, Javascript, React and Mobile App Development

Blog posts with tagAnimations

Animations

Using Ionic Animations to create an add to cart animated button in Ionic React

Blog posts with tag
Animations