Today's going to be a another simple day. I'm going to explain how I did another one of the subtle animations I added.

Each of the "blocks" for my project is a link that sends users to the project repo. When you hover over the link the image zooms in a bit. It's hard to tell without a video, but I'll show the hovered and unhovered states below.

Unhovered State

This is the unhovered state of the link.

Hovered State

And this is the hovered state.

I used react spring to add this subtle animation and I'll talk a bit about the code. Since I used a component to create each of the project pages I had to get a bit creative.

const [{ size0, size1, size2, size3 }, set] = useSpring(() => ({
    size0: "110",
    size1: "100",
    size2: "100",
    size3: "100",
  }))

This is the setup that I have for each of the images. Since I have 4 images I have 4 size variables. I will mention that the first variable is 110 because that specific image doesn't fit into the div so I had to make it a little bit larger.

onMouseEnter={
                    index === 0
                      ? () => set({ size0: "120" })
                      : index === 1
                      ? () => set({ size1: "110" })
                      : index === 2
                      ? () => set({ size2: "110" })
                      : () => set({ size3: "110" })
                  }
                  onMouseLeave={
                    index === 0
                      ? () => set({ size0: "110" })
                      : index === 1
                      ? () => set({ size1: "100" })
                      : index === 2
                      ? () => set({ size2: "100" })
                      : () => set({ size3: "100" })
                  }

This allows me to change the size of each of the pictures as I hover over them and also allows me to return them to their original value. I'd prefer to not use a ternary statement but because this is a component when I hover over 1 image, all 4 of the images zoom in. That's why I had to come up with this alternate solution (Unless I'm missing something important.)

Well that's going to be all from me today. Thanks for reading!

This post is also available on DEV.