A blob animation can make your website more lively
Tags: reactspring, react, vite, codenewbie
Published: 2022-09-17 05:38:58

This is my first post ever :) Let's get started!!

This is what the result looks like:

![blob animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydo6956uk0uhoyyb338f.gif)

In this example, i will use [Vite](https://vitejs.dev) to create a new React app.

`npm create vite@latest`

I will complete it by adding some information for my project (name and framework)

Next, i am gonna create a new component called Blob.jsx and import it into App.jsx


![app component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imb2l6l1bpi00hi8yqa4.png)

Now, let's intergrate react-spring

### React-spring

Actually i just approached to [react-spring](https://react-spring.dev/) a few weeks ago, and suprisingly i found it super powerful.

React-spring gives a lot of opportunities to create wonderful animations which are super "realistic" and "physical"

And the usage is also pretty easy, just install by:

`npm install react-spring`

### Blob generator

From now, we just setup our app, next step, we need to create two random shapes of blob (.svg format) to toggle between their paths to create the desired animation.

I will use [Haikei](https://app.haikei.app/) for creating them
and download the svg format.

Next, i copy these two svg blobs into my Blob.jsx component and delete `<rect x={0} y={0} width={900} height={600} fill="#FF0066" />` (it is just the background)

```
<div>
                <svg id="visual" viewBox="0 0 900 600" width={900} height={600} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1">
                    <g transform="translate(407.8302694033731 297.56887719695067)">
                        <path d="M158.7 -157.7C208 -109.4 252 -54.7 244.8 -7.2C237.6 40.3 179.3 80.6 129.9 130.6C80.6 180.6 40.3 240.3 -4.1 244.4C-48.6 248.6 -97.1 197.1 -126.4 147.1C-155.8 97.1 -165.9 48.6 -159.3 6.6C-152.7 -35.4 -129.4 -70.7 -100 -119C-70.7 -167.4 -35.4 -228.7 9.7 -238.4C54.7 -248 109.4 -206 158.7 -157.7" fill="#BB004B" />
                    </g>
                </svg>

                <svg id="visual" viewBox="0 0 900 600" width={900} height={600} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1">
                    <g transform="translate(477.0920346881802 291.5807221558637)">
                        <path d="M139.6 -142.1C164.6 -114.6 157.3 -57.3 164 6.7C170.7 70.7 191.4 141.4 166.4 167.9C141.4 194.4 70.7 176.7 3.4 173.3C-63.9 169.9 -127.8 180.8 -171.6 154.3C-215.4 127.8 -239.2 63.9 -231 8.2C-222.7 -47.4 -182.4 -94.8 -138.6 -122.3C-94.8 -149.8 -47.4 -157.4 4.9 -162.3C57.3 -167.3 114.6 -169.6 139.6 -142.1" fill="#BB004B" />
                    </g>
                </svg>
</div>
```

After this, i will extract the "d" attribute of each SVG path and save it as blob1 and blob2. 

```
   const blob1 = "M158.7 -157.7C208 -109.4 252 -54.7 244.8 -7.2C237.6 40.3 179.3 80.6 129.9 130.6C80.6 180.6 40.3 240.3 -4.1 244.4C-48.6 248.6 -97.1 197.1 -126.4 147.1C-155.8 97.1 -165.9 48.6 -159.3 6.6C-152.7 -35.4 -129.4 -70.7 -100 -119C-70.7 -167.4 -35.4 -228.7 9.7 -238.4C54.7 -248 109.4 -206 158.7 -157.7"

    const blob2 = "M139.6 -142.1C164.6 -114.6 157.3 -57.3 164 6.7C170.7 70.7 191.4 141.4 166.4 167.9C141.4 194.4 70.7 176.7 3.4 173.3C-63.9 169.9 -127.8 180.8 -171.6 154.3C-215.4 127.8 -239.2 63.9 -231 8.2C-222.7 -47.4 -182.4 -94.8 -138.6 -122.3C-94.8 -149.8 -47.4 -157.4 4.9 -162.3C57.3 -167.3 114.6 -169.6 139.6 -142.1"
```

Also i just keep one SVG tag and use blob1 for the path

```
 <svg id="visual" viewBox="0 0 900 600" width={900} height={600} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1">
                <g transform="translate(407.8302694033731 297.56887719695067)">
                    <path d={blob1} fill="#BB004B" />
                </g>
</svg>
```

From now, we can add spring animation for the blob, make it transform from blob1 to blob2 shape

```
    const blobAnimation = useSpring({
        from: { x: blob1 },
        to: { x: blob2 },
    })
```

Don't forget to import useSpring and animated to your component. And replace the `blob1` from "d" attribute by `blobAnimation.x`

```
import { useSpring, animated } from 'react-spring'

...

<animated.path d={blobAnimation.x} fill="#BB004B" />
```

Now, we are almost done, but the animation is too fast, we just need to add duration for it by adding `config` option and make it loop infinitely and also reversely.

Here is the useSpring code looks like:

```
    const blobAnimation = useSpring({
        from: { x: blob1 },
        to: { x: blob2 },
        config: {
            duration: 3000
        },
        loop: { reverse: true }
    })
```

And yes, we make it!


![blob animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydo6956uk0uhoyyb338f.gif)

Hope you can find it useful and apply it to your own project! :D