DEV Community

loading...
Cover image for Daily Two Cents - Subtle

Daily Two Cents - Subtle

centanomics profile image Cent ・2 min read

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!

Discussion

pic
Editor guide