Hi folks, welcome to Daily Two Cents. Today I'm going to talk about how I added React Spring to my portfolio. React spring is an animation library that I used to spice up my portfolio. There are two main components I added animations to. I'll mainly be talking about one, which is my main section which looks like so.

Shannon Introduction

When you click on my face, I change the large blue text, and the picture to this

Cent's Introduction

To do this, I use React Springs useSpring hook, which essentially takes values and turns them into animated ones.

const [flipped, flip] = useState(true)

  const { transform, opacity } = useSpring({
    opacity: flipped ? 1 : 0,
    transform: `
perspective(600px) rotateY(${flipped ? 180 : 0}deg)
`,
    config: { mass: 5, tension: 500, friction: 100 },
  })

I use the useState hook to setup the flipped value so I can use it in the following useSpring. It essentially changed the value when the flip is triggered, causing the image to flip like a piece of paper. I'll show to the code that triggers the flip below

<button
  onClick={() => {
    flip(!flipped)
  }}
  css={css`

    ...
  
`}
>
...
</button>

As you can see here I just trigger the flip with a click event on the button. The images are inside of the button and thanks to react spring, only one can be shown at once. My real face shows with my real name and my online name shows with my logo.

It has been a minute since I've touched react spring (I added this back in early 2020) and I want to say, writing about it like this definitely helps me remember how it works. I'll sign off here for today since I'm going to look at more of my portfolio code as I change things a bit. Thanks for reading!

This post is also available on DEV.